小tips：postMessage处理iframe跨域通信
实例
父页面发消息给子页面，子页面接收消息后回复父页面。
父页面代码：
<body>
父级页面：
<button id="btn">给iframe子页面传递消息button</button>
<iframe src="index2.html" id="iframe1"></iframe>
<script>
var btn = document.getElementById('btn');
btn.addEventListener('click',function() {
var data = {
message: '子页面应该接收的消息'
}
// 给子页面发送消息
document.getElementById('iframe1').contentWindow.postMessage(data,"/");
},false); // 接收子页面传递的消息
window.addEventListener('message',function(e) {
console.log(e.data); // 父页面：我接收到消息了
},false);
</script>
</body>
iframe子页面代码：
<script type="text/javascript">
// 接收父页面发送的内容
window.addEventListener('message',function(e) {
console.log(e.data) // {message: "子页面应该接收的消息"} // 接收内容后，我们也可以给父页面发消息
window.parent.postMessage('父页面：我接收到消息了','/');
},false);
</script>
message事件
- data 包含任意字符串数据，由原始脚本发送
- origin 一个字符串，包含原始文档的方案、域名以及端口(如：http://domain.example:80)
- lastEventId 一个字符串，包含了当前的消息事件的唯一标识符。
- source 原始文件的窗口的引用。更确切地说，它是一个WindowProxy对象。
- ports 一个数组，包含任何MessagePort对象发送消息。
我们可以打印下子页面接收父页面的消息的对象，如下：
// 接收父页面发送的内容
window.addEventListener('message',function(e) {
console.log(e)
},false);
打印结果：
postMessage方法
postMessage方法支持两个参数，具体参考下表：
- message：发送的数据
- targetOrigin： 发送数据的来源
postMessage方法中的message参数不仅仅可以是字符串，结构对象、数据对象(如：File和ArrayBuffer)或是数组都是可以的。在IE8/IE9/FireFox3.6及其以下版本只支持字符串数据。
targetOrigin参数指接收文档的来源。除非接收信息浏览上下文来源于提供的targetOrigin中的一个匹配，否则浏览器是不会发送消息的。直接使用"*"通配符绕开限制，但显然这样很不安全。您在实际使用的时候务必指定目标来源。您还可以通过使用"/"来限制信息只能同源发送。
参考地址
小tips：postMessage处理iframe跨域通信的更多相关文章
- Javascript使用postMessage对iframe跨域通信
今天才发现原来有这么个好东西啊,跨域通信太方便了, 举个小栗子: 共两个页面, 页面1:www.a.com/a.html 页面2:www.b.com/b.html 实现目标:两个网站页面实现跨域相互通 ...
- iframe跨域通信实战
"长时间不写文章,开头的方式总是那么出奇的相似",最近很忙,好久没写博客了啊(是不是?). 更换工作已经有三个月有余,这段三个月把过去三年没加过的班都加了一次.收获挺多,发现的问题 ...
- Javascript 使用postMessage对iframe跨域传值或通信
实现目标:两个网站页面实现跨域相互通信 当前例子依赖于 jQuery 3.0 父页面代码:www.a.com/a.html <iframe id="myIframe" src ...
- iframe跨域通信方案
概述 JavaScript出于安全方面的考虑,不允许跨域调用其他页面的对象.但在安全限制的同时也给注入iframe或是ajax应用上带来了不少麻烦.这里把涉及到跨域的一些问题简单地整理一下: 首先什么 ...
- 对iframe跨域通信的封装
github源码:https://github.com/boycy815/topProxy 为了偷懒所以依赖了Kissy:http://docs.kissyui.com/ 用法举例:需求是在http: ...
- iframe跨域通信window.postMessage()方法
需求:A页面中要嵌入一个iframe,这个iframe是B页面,此时A页面需要得到B页面的一些信息. window.postMessage() 我们都知道浏览器的同源策略,即对于两个不同页面的脚本,只 ...
- postMessage解决iframe跨域问题
转:https://juejin.im/post/5b8359f351882542ba1dcc31 https://juejin.im/post/590c3983ac502e006531df11 ht ...
- 【JavsScript】父子页面之间跨域通信的方法
由于同源策略的限制,JavaScript跨域的问题,一直是一个比较棘手的问题,为了解决页面之间的跨域通信,大家煞费苦心,研究了各种跨域方案.之前也有小网同学分享过一篇“跨域,不再纠结” 开始照着尝试时 ...
- 【JavaScript】父子页面之间跨域通信的方法
由于同源策略的限制,JavaScript跨域的问题,一直是一个比较棘手的问题,为了解决页面之间的跨域通信,大家煞费苦心,研究了各种跨域方案.之前也有小网同学分享过一篇“跨域,不再纠结” 开始照着尝试时 ...
- iframe跨域数据传递
项目中需要和其他单位合作开发,方案采用iframe嵌入页面,开发过程中设计到了跨域数据的传递,初步方案决定使用html5 API postMessage进行iframe跨域数据传递: 域名A下的页面 ...
随机推荐
- js需要同时发起百条接口请求怎么办？--通过Promise实现分批处理接口请求
如何通过 Promise 实现百条接口请求? 实际项目中遇到需要发起上百条Promise接口请求怎么办? 前言 不知你项目中有没有遇到过这样的情况,反正我的实际工作项目中真的遇到了这种玩意,一个接口获 ...
- ElementUI FORM结合Vue实现横向排列表单项
结合Vue实现横向排列表单项 前言 默认的,ElementUI的Form表单项(控件)是垂直排列,即一行显示一个表单项.但是在实际应用中,有时候会需要一行显示多个表单项.针对这类需求,笔者提供以下解决 ...
- [rCore学习笔记 017]实现批处理操作系统
写在前面 本随笔是非常菜的菜鸡写的.如有问题请及时提出. 可以联系:1160712160@qq.com GitHhub:https://github.com/WindDevil (目前啥也没有 本章目 ...
- PKUWC2024游记
PKUWC2024 游记 day -???? 得知今年冬令营在育才,非常高兴不用出远门了. day 1 当天上午 7:00 起来,然后做车去报道,非常堵车.感觉育才环境挺好的,~不像某人在读学校一样. ...
- Android 性能稳定性测试工具 mobileperf 开源 (天猫精灵 Android 性能测试-线下篇)
Android 性能稳定性测试工具 mobileperf 开源 (天猫精灵 Android 性能测试-线下篇) 这篇文章写得很好!感谢阿里云开发者社区!!! 原文地址: https://develop ...
- Python将信息发送到指定邮箱
目的:将Python执行脚本结果发送到指定邮箱 使用场景:可将每天.每周定时任务python跑的结果汇总,定时发送到小组成员/领导邮箱中 1.以下163邮箱为例,设置发件人是163邮箱,接收人是qq邮 ...
- 树莓派3b+使用官方屏幕后倒置问题——屏幕倒置
树莓派3b+的屏幕本身就是倒置的,因此为了使树莓派在官方屏幕下能显示正常的屏幕画面因此需要通过设置把树莓派的官方屏幕的输出倒置一下,这样树莓派的官方屏幕的输出就是正常的了. 解决方法:(源自:http ...
- 计算机领域：学术写作中的conducive的含义表示
"Conducive" 的意思是"有助于"或"有益于".在学术和正式的写作中,"conducive" 常用于描述某种情况 ...
- 国产CPU（兆芯 kx-6640） 播放1080p视频效果
前一阵买了一个国产CPU的主机(国产CPU,国产操作系统UOS--零刻LZX迷你主机 , 显卡驱动安装以及屏幕配置),cpu是兆芯 kx-6640,用来播放1080p的视频虽然不是那么丝滑的流畅,但 ...
- Hutool常用工具类
1.背景 实际开发中经常用到很多的工具类,这里hutool提供了一系列的工具类,下面重点介绍常用的工具类. 2.使用步骤 官方文档:https://hutool.cn/docs/#/ 添加依赖 < ...