说起来挺简单的，可以直接去查询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; // co黑龙江林业nsole.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:ur圣诞节由来l // }, '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反馈
结束
总结：这个方式还是很好用的，可以不同技术栈通信外链，但是安全方面不是很好，而且需要会出现跨域问题数据请求不到或者接口被拦截，需要自己打开接口设置一波继续访问。
附赠：还有其它方式的引入我自己没用过，参考链接分享
/d/file/titlepic/8418643.html
到此这篇关于html5关于外链嵌入页面通信问题(postmessage解决跨域通信)的文章就介绍到这了,更多相关html5外链嵌入通信内容请搜索www.887551.com以前的文章或继续浏览下面的相关文章，希望大家以后多多支持www.887551.com！
本文发布于:2023-04-07 13:39:10，感谢您对本站的认可！
本文链接：https://www.wtabcd.cn/fanwen/zuowen/1245e414d277b9bf4c4018d1dcdefe13.html
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系，我们将在24小时内删除。
本文word下载地址：html5关于外链嵌入页面通信问题(postMessage解决跨域通信).doc
本文 PDF 下载地址：html5关于外链嵌入页面通信问题(postMessage解决跨域通信).pdf
| 留言与评论（共有 0 条评论） |
