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

说起来挺简单的，可以直接去查询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/fb579be635b2
https://www.cnblogs.com/Jry666/p/8418643.html
https://blog.csdn.net/monkindey/article/details/23659387

到此这篇关于html5关于外链嵌入页面通信问题(postMessage解决跨域通信)的文章就介绍到这了,更多相关html5外链嵌入通信内容请搜索以前的文章或继续浏览下面的相关文章，希望大家以后多多支持！

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！