html5 postMessage(html5关于外链嵌入页面通信问题postMessage解决跨域通信)
html5 postMessage
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外链嵌入通信内容请搜索开心学习网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持开心学习网!
- html5导入图片文件(HTML5 实现图片上传预处理功能)
- html5单选项怎么调选项间距(html5实现输入框fixed定位在屏幕最底部兼容性)
- Html5新增的标签
- html5怎么将字体变为红色(Html5自定义字体解决方法)
- html5发送文字特效(HTML5调用手机发短信和打电话功能)
- html5背景怎么变色(HTML5 背景的显示区域实现)
- html5带放大镜的搜索代码(html5借用repeating-linear-gradient实现一把刻度尺ruler)
- html5 canvas绘图(使用html5 canvas绘制圆环动效)
- html5表格设计(Html5饼图绘制实现统计图的方法)
- html5app开发用什么平台(Html5与App的通讯方式详解)
- html5底部组件(HTML5 Blob对象的具体使用)
- html53d效果代码(HTML5 直播疯狂点赞动画实现代码 附源码)
- html5基本标签详解(详解HTML5布局和HTML5标签)
- html5本地存储功能(利用Node实现HTML5离线存储的方法)
- html5中提供的绘图元素(使用Html5中的cavas画一面国旗)
- html5支持video的视频格式(解决html5中的video标签ios系统中无法播放使用的问题)
- ()
- 书法欣赏 宋.志南诗《绝句》(宋.志南诗绝句)
- 每周一首古诗 《绝句》(每周一首古诗绝句)
- 蓝色代表什么(蓝色代表什么性格的人)
- 红色代表什么(红色代表什么情感和含义)
- 南宋志南和尚绝句 杨柳风似庙中来(南宋志南和尚绝句)
热门推荐
- linux怎么看后台进程(一行代码教你如何隐藏Linux进程)
- docker的postgres镜像包(Docker中运行PostgreSQL并推荐几款连接工具)
- .NET中获取URL问号后面的字符串
- 使用border-collapse设置table边框
- JS实现文字向下滚动
- 网站iis日志的位置
- python零基础入门加密与解密(Python玩转加密的技巧推荐)
- 怎么用docker中的mysql连接数据库(解决Docker之mysql容器数据库更改不生效的问题)
- dedecms列表分页代码(Dedecms文章设置推荐后列表页标题自动加粗的解决方法)
- python数据表教程(详解Python sys.argv使用方法)
排行榜
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9