关于html5:关于外链嵌入页面通信问题postMessage解决跨域通信

47次阅读

共计 2563 个字符，预计需要花费 7 分钟才能阅读完成。

说起来挺简略的，能够间接去查问 postMessage 推送和 window.addEventListener 接管应用形式，能本人搞明确是最好的，本文章也只是记录一下本人的应用形式
应用 postMessage 推送和 window.addEventListener 接管
原理：

发送方应用 postMessage 办法向接管方推送音讯，第一个参数为推送的内容，第二个参数是容许被拜访的域名；

接管方通过监听 message 的办法接收数据。

实现跨域就须要有两个不同源的服务器咯

开始

iframe 引入页面（我也是应用这样形式）
父页面（发送方）

<script>
// 这里是发送监听
        function btnClick(params) {console.log(1111)
            var iframe = document.getElementById("childframe")
            iframe.contentWindow.postMessage({
                text:'你收到了没有呀（白天）',
                action : 'light'  // action : 自定义动作参数，用于承受收音讯是的判断
             }, 'http://localhost:8000/#/');
           
        }
   
        function btnClick2(params) {console.log(2222)
            var iframe = document.getElementById("childframe")
            iframe.contentWindow.postMessage({
                text:'你收到了没有呀（黑夜）',
                action : 'dark'  // action : 自定义动作参数，用于承受收音讯是的判断
             }, 'http://localhost:8000/#/');
             
    // 这是接管子页面返回的监听（过后也是被各种文章搞的很懵圈呀，如果只父页面发送音讯不须要在接管子页面的反馈能够不必写这些）window.addEventListener('message', function (e) {alert(e.data)
            const data = e.data;
            console.log(data,'接到你的页面了 data')
        }) 
            // 上面这些都是踩过的坑
            // var iwindow = iframe.contentWindow;
            // var idoc = iwindow.document;
            //  console.log("window",iwindow);// 获取 iframe 的 window 对象
            //  console.log("document",idoc); // 获取 iframe 的 document
            //  console.log("html",idoc.documentElement);// 获取 iframe 的 html
            //  console.log("head",idoc.head); // 获取 head
            //  console.log("body",idoc.body); // 获取 body
            // console.log(window.frames['myframe'].window)
        }
    </script>
<body>
    <button onclick="btnClick()"> 点击 </button>
    <br/>
    <button onclick="btnClick2()"> 点击 </button>
 
    <iframe name="myframe" src ="http://localhost:8000/#/home1?type=light" id="childframe" width="1400px" height="800px">
</body>

对于发送简略解释一波：
<iframe name=”myframe” src =”http://localhost:8000/#/home1?type=light” id=”childframe” width=”1400px” height=”800px”>
这里外面的 src 是子页面的地址（这里是依据你本人写的路由或者那个页面要监听写的地址）。

postMessage({text:’ 你收到了没有呀（黑夜）’, action : ‘dark’}, ‘http://localhost:8000/#/’)
第一个参数是内容，第二是子页面的地址，这里能够只写我的项目地址就能够还有写 的（例如：postMessage(‘内容’, ‘‘)），我是没试过但应该也能够。

子页面（接管方 + 反馈）

我这边接管是间接在我但 react 我的项目里写的

 componentWillMount() {window.addEventListener('message', (e) => {console.log(e)
      let data= e.data // 这就是接管到的数据
                       //e.origin 这是发送数据的地址
   })
   
   ...
   ...
   ...
   // 对于反馈我是在我我的项目里写了一个点击动作发送的如下
   goCustomerDetail=(data)=>{
    let url = data.url
            // window.top.postMessage({
            //     text:'返回 Url',
            //     url:url
            // }, 'http://XXX:8083/ceshi/ceshi.html')
            
            window.top.postMessage('{"name":" 客户详情 ","path":"'+url+'"}', '*')
    }

对于下面接管反馈解释一波：
1、接管 window.addEventListener(‘message’, (e) => {console.log(e) })
其中 e 是整个接管到的音讯体外面有很多内容，本人拿应用的数据，留神这里应该加判断符合条件后在进行一些操作
2、发送形式，我本人试验两种反馈，父页面都能收到
留神是用 window.top.postMessage 反馈

完结
总结：这个形式还是很好用的，能够不同技术栈通信外链，然而平安方面不是很好，而且须要会呈现跨域问题数据申请不到或者接口被拦挡，须要本人关上接口设置一波持续拜访。

附赠：还有其它形式的引入我本人没用过，参考链接分享

https://www.jianshu.com/p/fb5…
https://www.webhek.com/post/w…
https://www.cnblogs.com/Jry66…
https://blog.csdn.net/monkind…

正文完