移动端实用小组件----跳转返回传参

import router from "@/router";
/**
 * useComponents
 * @description 打开跳转页面，并带回参数
 * @property { string } op.path 跳转的路由地址
 * @property { string } op.title 显示在iframe页面的title，非必要不用传，会从路由meta.title里获取
 * try { const res = await useComponents({path:'/xx'}); if(res){}} catch(e){}
 * 在/xx 页面  postMsg({data:xxx})
 */
export function useComponents(
  op: any = {
    path: "",
    title: "",
  }
) {
  return new Promise((resolve) => {
    const url = op.path;
    const iframe = document.createElement("iframe");
    iframe.src = url;
    iframe.style.position = "fixed";
    iframe.style.top = "0";
    iframe.style.left = "0";
    iframe.style.width = "100%";
    iframe.style.height = "100%";
    iframe.style.background = "#fff";
    iframe.style.border = "none";
    iframe.style.zIndex = "1000";
    // iframe.allow = "*";

    const title = router
      .getRoutes()
      .find((item) => item.path === url.split("?")[0])?.meta?.title;
    document.title = op.title || title || "";

    document.body.appendChild(iframe);

    // fix后退按钮的问题
    history.pushState(null, "", "#useComponents");

    // 关闭页面
    function close() {
      window.removeEventListener("message", messageHandler);
      window.removeEventListener("popstate", popstateHandler);
      if (iframe) {
        document.body.removeChild(iframe);
      }
    }

    // 监听后退，关闭
    function popstateHandler() {
      console.log("111");
      close();
      resolve(null);
    }

    // 接收信息
    function messageHandler(event: any) {
      const data = event.data || {};
      if (data.action === "useComponents:pos") {
        resolve(data.data);
        close();
        history.back();
      }
    }

    // 监听后退，关闭
    window.addEventListener("popstate", popstateHandler);
    window.addEventListener("message", messageHandler);
  });
}

export function postMsg(obj: any = {}) {
  window.parent &&
    window.parent.postMessage(
      {
        action: "useComponents:pos",
        data: obj,
      },
      "*"
    );
}