解决HTML5外链嵌入页面通信问题

这篇文章主要介绍了htMl5关于外链嵌入页面通信问题(posTMESSage解决跨域通信),文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧。说起来挺简单的，可以直接去查询posTMESSage推送和window.addEventListeneR接收使用方式，能自己搞明白是最好的，本文章也只是记录一下自己的使用方式。使用posTMESSage推送和window.addEventListeneR接收。原理：发送方使用posTMESSage方法向接收方推送消息，第一个参数为推送的内容，第二个参数是允许被访问的域名；接收方通过监听MeSSage的方法接收数据。实现跨域就需要有两个不同源的服务器咯。开始。iframe引入页面（我也是使用这样方式）。父页面（发送方）。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/#/); }.关于发送简单解释一波。这里里面的sRc是子页面的地址（这里是根据你自己写的路由或者那个页面要监听写的地址）。posTMESSage({ text:你收到了没有呀（黑夜）, action : daRk }, http://localhost:8000/#/).第一个参数是内容，第二是子页面的地址，这里可以只写项目地址就可以还有写的。子页面（接收方+反馈）。我这边接收是直接在我但React项目里写的。coMponentWillMount() { window.addEventListeneR(MeSSage, (e) => { console.log(e) let data= e.data //这就是接收到的数据 //e.oRigin这是发送数据的地址 }) … … … //关于反馈我是在我项目里写了一个点击动作发送的如下 goCUStoMeRDetAIl=(data)=>{ let uRl = data.uRl window.top.posTMESSage({“naMe”:”客户详情”,”path”:”+uRl+”}, *) }。关于上面接收反馈解释一波。接收 window.addEventListeneR(MeSSage, (e) => {console.log(e) }).其中e是整个接收到的消息体里面有很多内容，自己拿使用的数据，注意这里应该加判断符合条件后在进行一些操作。发送方式，我自己实验两种反馈，父页面都能收到。注意是用 window.top.posTMESSage反馈。结束。总结：这个方式还是很好用的，可以不同技术栈通信外链，但是安全方面不是很好，而且需要会出现跨域问题数据请求不到或者接口被拦截，需要自己打开接口设置一波继续访问。附赠：还有其它方式的引入我自己没用过，参考链接分享。到此这篇关于htMl5关于外链嵌入页面通信问题(posTMESSage解决跨域通信)的文章就介绍到这了。来源：脚本之家。链接：https://www.jb51.net/htMl5/736172.htMl。