详解使用postMessage解决iframe跨域通信问题


Posted in HTML / CSS onNovember 01, 2019

这周碰到一个让人头疼的需求:要在我的web项目中嵌入另一个第三方web项目。第一时间想到的就是用iframe了,但问题来了,我和第三方web项目是有交互的,这就违反同源策略了,处理跨域问题是最让人头疼的事之一。

需求是这样的,在我的页面点击一些按钮,要实时反馈到iframe子页面,子页面再进行响应。

当时脑子里第一时间想到的解决方案是:用NGINX把两个项目代理到同一域名下。但这样似乎有点小题大做了,有没有更方便快捷的方法呢?

在window对象下有个postMessage方法,是专门用来解决跨域通信问题的。

关于postMessage的详细介绍请戳这里,不过MDN的文档太详细了,导致有些同学看完还是一脸懵逼,下面我们就来看看怎么用postMessage实现iframe跨域通信,当你会用了之后再回去看文档,感觉是完全不同的。

首先我们模拟场景,假设有两个不同源的页面,iframePage.html是index.html的子页面:

<!-- index.html -->

<body style="border:5px solid #333;">

  <h1>this is index</h1>

  <iframe src="./iframePage.html" id='myframe'></iframe>

</body>
<!-- iframePage -->

<body style="border:5px solid #333;">

  <h1>this is iframePage</h1>

</body>

现在这两个iframe是无法通信,因为它们是不同源的(假设存在跨域问题),这时候就要用到postMessage了。

我们先试着从父页面向子页面发送一条消息:

// idnex.html

//获取iframe元素
iFrame = document.getElementById('myframe')

//iframe加载完毕后再发送消息,否则子页面接收不到message
iFrame.onload = function(){

  //iframe加载完立即发送一条消息
  iFrame.contentWindow.postMessage('MessageFromIndex1','*');

}

我们知道postMessage是挂载在window对象上的,所以等iframe加载完毕后,用iFrame.contentWindow获取到iframe的window对象,然后调用postMessage方法,相当于给子页面发送了一条消息。

postMessage方法第一个参数是要发送的数据,可以是任何原始类型的数据。

Gecko 6.0 (Firefox 6.0 / Thunderbird 6.0 / SeaMonkey 2.3)之前,第一个参数必须是一个字符串。

postMessage方法第二个参数可以设置要发送到哪个url,如果当前子页面的url和设置的不一致,则会发送失败,我们设置为*,代表所有url都允许发送。

postMessage方法还有第三个参数,属于高级用法,这里不做讨论,可以稍后去MDN了解。

消息发送到iframePage.html,我们来接收message:

// iframePage.html

//回调函数
function receiveMessageFromIndex ( event ) {
  console.log( 'receiveMessageFromIndex', event )
}

//监听message事件
window.addEventListener("message", receiveMessageFromIndex, false);

我们只需要在子页面监听message事件,并且设置好回调函数即可,来看看打印出来的event:

详解使用postMessage解决iframe跨域通信问题

event对象中的data属性存放着我们从父页面传过来的数据,就这么简单!

让我们再试试从子页面发送数据给父页面:

// iframePage.html

//给父页面发送消息,data为对象
parent.postMessage( {msg: 'MessageFromIframePage'}, '*');

父页面接收数据:

//index.html

//回调函数
function receiveMessageFromIframePage (event) {
    console.log('receiveMessageFromIframePage', event)
}

//监听message事件
window.addEventListener("message", receiveMessageFromIframePage, false);

我看看到,的确可以传输不同的数据,此时data为一个对象:

详解使用postMessage解决iframe跨域通信问题

大家可以到postMessage-demo把代码clone下来运行试试看。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

HTML / CSS 相关文章推荐
前端制作动画的几种方式(css3,js)
Dec 12 HTML / CSS
CSS实现半透明边框与多重边框的场景分析
Nov 13 HTML / CSS
CSS实现聊天气泡效果
Apr 26 HTML / CSS
CSS3实现淘宝留白的方法
Jun 05 HTML / CSS
利用html5 canvas破解简单验证码及getImageData接口应用
Jan 25 HTML / CSS
HTML5 embed标签定义和用法详解
May 09 HTML / CSS
使用html5 canvas 画时钟代码实例分享
Nov 11 HTML / CSS
Html5实现文件异步上传功能
May 19 HTML / CSS
如何避免常见的6种HTML5错误用法
Nov 06 HTML / CSS
div或img图片高度随宽度自适应的方法
Feb 06 HTML / CSS
CSS3鼠标悬浮过渡缩放效果
Apr 17 HTML / CSS
HTML常用标签超详细整理
Mar 19 HTML / CSS
跨域修改iframe页面内容详解
Oct 31 #HTML / CSS
html如何对span设置宽度
Oct 30 #HTML / CSS
关于iframe跨域使用postMessage的实现
Oct 29 #HTML / CSS
使用canvas生成含有微信头像的邀请海报没有微信头像问题
Oct 29 #HTML / CSS
Html5与App的通讯方式详解
Oct 24 #HTML / CSS
html+js 实现markdown编辑器效果
Oct 23 #HTML / CSS
高清屏下canvas重置尺寸引发的问题的解决
Oct 14 #HTML / CSS
You might like
php 获取本机外网/公网IP的代码
2010/05/09 PHP
php文件怎么打开 如何执行php文件
2011/12/21 PHP
使用Sphinx对索引进行搜索
2013/06/25 PHP
Thinkphp搭建包括JS多语言的多语言项目实现方法
2014/11/24 PHP
CentOS下PHP7的编译安装及MySQL的支持和一些常见问题的解决办法
2015/12/17 PHP
thinkPHP5.0框架API优化后的友好性分析
2017/03/17 PHP
Jquery 学习笔记(一)
2009/10/13 Javascript
jQuery性能优化28条建议你值得借鉴
2013/02/16 Javascript
详解JS 比较两个Json对象的值是否相等的实例
2013/11/20 Javascript
解析JavaScript中的不可见数据类型
2013/12/02 Javascript
js实现省市联动效果的简单实例
2014/02/10 Javascript
Bootstrap零基础入门教程(三)
2016/07/18 Javascript
详解JS中遍历语法的比较
2017/04/07 Javascript
BootStrap的双日历时间控件使用
2017/07/25 Javascript
解决vue打包项目后刷新404的问题
2018/03/06 Javascript
Vue.js 动态为img的src赋值方法
2018/03/14 Javascript
node中IO以及定时器优先级详解
2019/05/10 Javascript
5分钟快速看懂ES6中的反射与代理
2019/12/19 Javascript
Node.js实现批量下载图片简单操作示例
2020/01/18 Javascript
vue 实现用户登录方式的切换功能
2020/04/14 Javascript
Node.js利用Express实现用户注册登陆功能(推荐)
2020/10/26 Javascript
echarts浮动显示单位的实现方法示例
2020/12/04 Javascript
Python3.5面向对象编程图文与实例详解
2019/04/24 Python
numpy和pandas中数组的合并、拉直和重塑实例
2019/06/28 Python
Python facenet进行人脸识别测试过程解析
2019/08/16 Python
详解python 中in 的 用法
2019/12/12 Python
Python图像处理库PIL中图像格式转换的实现
2020/02/26 Python
Python打包工具PyInstaller的安装与pycharm配置支持PyInstaller详细方法
2020/02/27 Python
Pycharm github配置实现过程图解
2020/10/13 Python
Kathmandu美国网站:新西兰户外运动品牌
2019/03/23 全球购物
广告学专业应届生求职信
2013/10/01 职场文书
商务主管岗位职责
2013/12/08 职场文书
单位委托书范本(3篇)
2014/09/18 职场文书
党风廉政建设个人总结
2015/03/06 职场文书
pytorch--之halfTensor的使用详解
2021/05/24 Python
java Nio使用NioSocket客户端与服务端交互实现方式
2021/06/15 Java/Android