前端和前端联调的各种姿势，了解一下

// 父页面的js
    document.querySelector("iframe").onload = () => {
      window.frames[0].postMessage("data from parent", "*");
    };

// 子页面的js
    window.addEventListener(
      "message",
      e => {
        console.log(e); // e是事件对象，e.data即是父页面发送的message
      },
      false
    );
复制代码

    const iframe = document.querySelector("iframe");
    const { src } = iframe;
// 把数据转字符串，再通过哈希传递到子页面
    function postMessageToIframe(data) {
      iframe.src = `${src}#${encodeURIComponent(JSON.stringify(data))}`;
    }
复制代码

    window.onhashchange = e => {
// 监听到哈希变化，序列化json
      const data = JSON.parse(decodeURIComponent(location.hash.slice(1)));
      console.log(data, "data >>>>");
    };
复制代码

// 子页面
parent.postMessageToIframe({ name: "from child" })

// 父页面, 代码是和子页面一样的
    window.onhashchange = () => {
      const data = JSON.parse(decodeURIComponent(location.hash.slice(1)));
      console.log(data, "data from child >>>>");
    };
复制代码

// 父页面
    setTimeout(() => {
      localStorage.setItem("a", localStorage.getItem("a") + 1);
    }, 2000);
    window.addEventListener("storage", e => console.log(e, "parent"));

// 子页面
window.addEventListener("storage", e => console.log(e, "child"));
复制代码

    const isIframe = location.search;
    if (isIframe) {
// 子页面
      window.addEventListener("storage", e => console.log(e, "child"));
    } else {
// 父页面，创建一个iframe
      const iframe = document.createElement("iframe");
      iframe.src = location.href + "?a=1";
      document.body.appendChild(iframe);
      setTimeout(() => {
        localStorage.setItem("a", localStorage.getItem("a") + 1);
      }, 2000);
      window.addEventListener("storage", e => console.log(e, "parent"));
    }
复制代码

// 父页面
    const channel = new MessageChannel();
// 给子页面的window注入port2
    iframe.contentWindow.port2 = channel.port2;
    iframeonload = () => {
      // 父页面使用port1发消息，port2会收到
      channel.port1.postMessage({ a: 1 });
    };

// 子页面，使用父页面注入的port2
    window.port2.onmessage = e => {
      console.error(e);
    };
复制代码

// 存放所有的连接端口
const everyPorts = [];
onconnect = function({ ports }) {
// onconnect一触发，就存放到数组里面
  everyPorts.push(...ports);
// 每次连接所有的端口都加上监听message事件
  [...ports].forEach(port => {
    port.onmessage = function(event) {
// 每次收到message，对所有的连接的端口广播，除了发消息的那个端口
      everyPorts.forEach(singlePort => {
        if (port !== singlePort) {
          singlePort.postMessage(event.data.data);
        }
      });
    };
  });
};
复制代码

    const worker = new SharedWorker("./worker.js");
    window.worker = worker;
    worker.port.addEventListener(
      "message",
      e => {
        console.log("parent：", e);
      },
      false
    );
    worker.port.start();
    setTimeout(() => {
      worker.port.postMessage({
        from: "parent",
        data: {
          a: 111,
          b: 26
        }
      });
    }, 2000);
复制代码

    const worker = new SharedWorker("./worker.js");
    worker.port.onmessage = function(e) {
      console.log("child", e);
    };
    worker.port.start();
    setTimeout(() => {
      worker.port.postMessage({ data: [1, 2, 3] });
    }, 1000);
复制代码

// 父页面
    document.querySelector("iframe").contentWindow.componentDidMount = () => {
      console.log("iframe did mount");
    };

// 子页面
    window.onload = () => {
      // 假设这里有react一系列流程运行...
      setTimeout(() => {
        // 假设现在是react组件didmount的时候
        window.componentDidMount && window.componentDidMount();
      }, 1000);
    };
复制代码

   const iframe = document.querySelector("iframe");

    window.parentPageApis = window.parentPageApis || {};
    // 父页面自己给自己注入子页面调用的方法
    Object.assign(window.parentPageApis, {
      childComponentDidMount() {
        console.log("子页面did mount");
      },
      changeTitle(title) {
        document.title = title;
      },
      showDialog() {
        // 弹窗
      }
    });

// 给子页面注入一个callParentApi的方法来调父页面
    iframe.contentWindow.callParentApi = function(name, ...args) {
      window.parentPageApis[name] && window.parentPageApis[name].apply(null, args);
    };

    iframe.contentWindow.childPageApis =
      iframe.contentWindow.childPageApis || {};
    Object.assign(iframe.contentWindow.childPageApis, {
      // 父页面也可以给子页面注入方法
    });
    setTimeout(() => {
// 调用子页面的方法
      callChildApi("log", "父页面调子页面的log方法打印");
    }, 2000);
复制代码

    window.childPageApis = window.childPageApis || {};
    Object.assign(window.childPageApis, {
      // 子页面自己给自己注入方法
      log(...args) {
        console.log(...args);
      }
    });
    window.parent.window.callChildApi = function(name, ...args) {
      window.childPageApis[name] && window.childPageApis[name].apply(null, args);
    };
    window.onload = () => {
      // 假设这里有react一系列流程运行...
      setTimeout(() => {
        // 假设现在是react组件didmount的时候，告诉父页面
        window.callParentApi("childComponentDidMount");
      }, 1000);
    };
复制代码