详解使用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 相关文章推荐
纯CSS打造(无图像无js)的非常流行的讲话(语音)气泡效果
Dec 28 HTML / CSS
使用Filters滤镜弥补CSS3的跨浏览器问题以及兼容低版本IE
Jan 23 HTML / CSS
细说CSS3中box属性中的overflow-x属性和overflow-y属性值的效果
Jul 21 HTML / CSS
CSS3中Animation属性的使用详解
Aug 06 HTML / CSS
HTML5移动端开发遇见的东西
Oct 11 HTML / CSS
html5摇一摇代码优化包括DeviceMotionEvent等等
Sep 01 HTML / CSS
简单的HTML5初步入门教程
Sep 29 HTML / CSS
Html5 web本地存储实例详解
Jul 28 HTML / CSS
HTML5操作WebSQL数据库的实例代码
Aug 26 HTML / CSS
Html5定位终极解决方案
Feb 05 HTML / CSS
canvas小画板之平滑曲线的实现
Aug 12 HTML / CSS
HTML通过表单实现酒店筛选功能
May 18 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
PHP4实际应用经验篇(4)
2006/10/09 PHP
ezSQL PHP数据库操作类库
2010/05/16 PHP
PHP下载远程图片的几种方法总结
2017/04/07 PHP
javascript 页面只自动刷新一次
2009/07/10 Javascript
JS弹出窗口代码大全(详细整理)
2012/12/21 Javascript
Javascript对象属性方法汇总
2013/11/21 Javascript
一个仿糯米弹框效果demo
2014/07/22 Javascript
使用 js+正则表达式为关键词添加链接
2014/11/11 Javascript
jQuery实现拖拽效果插件的方法
2015/03/23 Javascript
javascript:void(0)点击登录没反应怎么解决
2015/11/13 Javascript
JavaScript统计网站访问次数的实现代码
2015/11/18 Javascript
学习JavaScript设计模式之装饰者模式
2016/01/19 Javascript
AngularJs表单校验功能实例代码
2017/02/09 Javascript
利用Jquery实现几款漂亮实用的时间轴(附示例代码)
2017/02/15 Javascript
React组件中的this的具体使用
2018/02/28 Javascript
js replace 全局替换的操作方法
2018/06/12 Javascript
JavaScript中BOM对象原理与用法分析
2019/07/09 Javascript
JavaScript函数Call、Apply原理实例解析
2020/02/17 Javascript
微信小程序实现底部弹出模态框
2020/11/18 Javascript
[57:50]DOTA2上海特级锦标赛主赛事日 - 4 胜者组决赛Secret VS Liquid第二局
2016/03/05 DOTA
Python语言实现百度语音识别API的使用实例
2017/12/13 Python
Python网络编程之TCP套接字简单用法示例
2018/04/09 Python
django从请求到响应的过程深入讲解
2018/08/01 Python
python 通过麦克风录音 生成wav文件的方法
2019/01/09 Python
Python读入mnist二进制图像文件并显示实例
2020/04/24 Python
python中threading开启关闭线程操作
2020/05/02 Python
selenium判断元素是否存在的两种方法小结
2020/12/07 Python
英国知名衬衫品牌美国网站:Charles Tyrwhitt美国
2016/08/28 全球购物
Dockers美国官方网站:卡其裤、男士服装、鞋及配件
2016/11/22 全球购物
工程管理专业个人求职信范文
2013/12/07 职场文书
十一酒店活动方案
2014/02/20 职场文书
投资意向书
2014/07/30 职场文书
竞选班长演讲稿500字
2014/08/22 职场文书
没有孩子的离婚协议书怎么写
2014/09/17 职场文书
四风问题个人剖析材料
2014/10/07 职场文书
搞笑欢迎词大全
2015/09/30 职场文书