详解使用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 渐变(Gradients)之CSS3 径向渐变
Jul 08 HTML / CSS
css3实现一个div设置多张背景图片及background-image属性实例演示
Aug 10 HTML / CSS
css3和jquery实现自定义checkbox和radiobox组件
Apr 22 HTML / CSS
使用CSS禁止textarea调整大小功能的方法
Mar 13 HTML / CSS
css3实现文字扫光渐变动画效果的示例
Nov 07 HTML / CSS
基于 HTML5 WebGL 实现的垃圾分类系统
Oct 08 HTML / CSS
HTML5 语音搜索(淘宝店语音搜素)
Jan 03 HTML / CSS
Html5新特性用canvas标签画多条直线附效果截图
Jun 30 HTML / CSS
HTML5新特性之type=file文件上传功能
Feb 02 HTML / CSS
Html5+CSS3+EL表达式问题小结
Dec 19 HTML / CSS
CSS3 制作精美的定价表
Apr 06 HTML / CSS
CSS中理解层叠性及权重如何分配
Dec 24 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中通过ADO调用Asscess数据库和COM程序
2006/10/09 PHP
php中require和require_once的区别说明
2014/02/27 PHP
PHP临时文件的安全性分析
2014/07/04 PHP
jQuery LigerUI 插件介绍及使用之ligerDrag和ligerResizable示例代码打包
2011/04/06 Javascript
使用原生javascript创建通用表单验证——更锋利的使用dom对象
2011/09/13 Javascript
node.js chat程序如何实现Ajax long-polling长链接刷新模式
2012/03/13 Javascript
javascript-简单的计算器实现步骤分解(附图)
2013/05/30 Javascript
jQuery事件之键盘事件(ctrl+Enter回车键提交表单等)
2014/05/11 Javascript
node.js中的fs.chownSync方法使用说明
2014/12/16 Javascript
jquery搜索框效果实现方法
2015/01/16 Javascript
js中函数声明与函数表达式
2015/06/03 Javascript
JQuery Mobile 弹出式登录框的实现方法
2016/05/28 Javascript
JS 对java返回的json格式的数据处理方法
2016/12/05 Javascript
折叠菜单及选择器的运用
2017/02/03 Javascript
PHP实现本地图片上传和验证功能
2017/02/27 Javascript
详解使用vue脚手架工具搭建vue-webpack项目
2017/05/10 Javascript
JS实现按钮控制计时开始和停止功能
2017/07/27 Javascript
Vue 框架之动态绑定 css 样式实例分析
2018/11/14 Javascript
详解JSON.stringify()的5个秘密特性
2020/05/26 Javascript
公众号SVG动画交互实战代码
2020/05/31 Javascript
Nuxt配置Element-UI按需引入的操作方法
2020/07/06 Javascript
[47:31]完美世界DOTA2联赛PWL S3 INK ICE vs DLG 第一场 12.12
2020/12/16 DOTA
python中self原理实例分析
2015/04/30 Python
flask中使用蓝图将路由分开写在不同文件实例解析
2018/01/19 Python
Python实现通过解析域名获取ip地址的方法分析
2019/05/17 Python
Django多进程滚动日志问题解决方案
2019/12/17 Python
Tensorflow 自定义loss的情况下初始化部分变量方式
2020/01/06 Python
Python学习之os模块及用法
2020/06/03 Python
浅谈html5之sse服务器发送事件EventSource介绍
2017/08/28 HTML / CSS
留学生如何写好自荐信
2013/12/27 职场文书
学生社团文化节开幕式主持词
2014/03/28 职场文书
抗洪救灾感谢信
2015/01/22 职场文书
2016学习雷锋精神活动倡议书
2015/04/27 职场文书
安全教育日主题班会
2015/08/13 职场文书
如何使用Maxwell实时同步mysql数据
2021/04/08 MySQL
详解Python常用的魔法方法
2021/06/03 Python