postMessage 实现跨域通信

最新推荐文章于 2025-06-18 17:46:05 发布

Vincentzyc

最新推荐文章于 2025-06-18 17:46:05 发布

阅读量765

点赞数 1

CC 4.0 BY-SA版权

分类专栏： javascript 文章标签： js 前端开发 postMessage 跨域通信

本文链接：https://blog.youkuaiyun.com/zzzyyc/article/details/86079636

javascript 专栏收录该内容

19 篇文章

订阅专栏

1. iframe + postMessage

     //主页面：
      var iframe = document.createElement("iframe");
      iframe.src = "http://localhost:3000";
      iframe.id = "myFrame";
      iframe.width = "100%";
      iframe.height = "100%";

      iframe.onload = function () {
        document.getElementById('myFrame').contentWindow.postMessage('主页面消息', 'http://localhost:3000');
      };
      document.body.appendChild(iframe);

     //iframe页 http://localhost:3000：
    window.addEventListener('message', function (event) {
      if(event.origin !== "主页面域名") return;
      console.log(event);
    }, false);

2. window.open() + postMessage

      //主页面：http://192.168.xxx.xxx:5000
      let newWin = window.open("http://localhost:3000");
      let timer = setInterval(() => {
        newWin.postMessage('testtest', 'http://localhost:3000');
      }, 500);
      window.addEventListener('message', function (event) {
        if (event.origin !== 'http://localhost:3000') return;
        if (event.data === 'Received') clearInterval(timer)
      }, false);

    // window.open 页  http://localhost:3000：
    window.addEventListener('message', function (event) {
      if(event.origin !== "http://192.168.xxx.xxx:5000") return;
      event.source.postMessage('Received',event.origin);
    }, false);