详解使用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中动画属性transform、transition和animation属性的区别
Sep 25 HTML / CSS
css3弹性盒模型(Flexbox)详细介绍
Oct 08 HTML / CSS
利用css3实现的简单的鼠标悬停按钮
Nov 04 HTML / CSS
CSS3实现10种Loading效果
Jul 11 HTML / CSS
利用CSS3动画实现圆圈由小变大向外扩散的效果实例
Sep 10 HTML / CSS
从一次项目重构说起CSS3自定义变量在项目的使用方法
Mar 01 HTML / CSS
HTML5仿手机微信聊天界面
Mar 18 HTML / CSS
html5 Canvas画图教程(11)—使用lineTo/arc/bezierCurveTo画椭圆形
Jan 09 HTML / CSS
html5 canvas简单封装一个echarts实现不了的饼图
Jun 12 HTML / CSS
AmazeUI 模态窗口的实现代码
Aug 18 HTML / CSS
CSS变量实现主题切换的方法
Jun 23 HTML / CSS
纯 CSS 自定义多行省略的问题(从原理到实现)
Nov 11 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 array_pop()数组函数将数组最后一个单元弹出(出栈)
2011/07/12 PHP
php权重计算方法代码分享
2014/01/09 PHP
php利用curl抓取新浪微博内容示例
2014/04/27 PHP
php动态添加url查询参数的方法
2015/04/14 PHP
给PHP开发者的编程指南 第一部分降低复杂程度
2016/01/18 PHP
Zend Framework动作助手Json用法实例分析
2016/03/05 PHP
Yii框架实现图片上传的方法详解
2017/05/20 PHP
PHP面向对象五大原则之开放-封闭原则(OCP)详解
2018/04/04 PHP
jQuery中RadioButtonList的功能及用法实例介绍
2013/08/23 Javascript
javascript计时器事件使用详解
2014/01/07 Javascript
JavaScript 弹出子窗体并返回结果到父窗体的实现代码
2016/05/28 Javascript
vue构建单页面应用实战
2017/04/10 Javascript
从零开始学习Node.js系列教程之基于connect和express框架的多页面实现数学运算示例
2017/04/13 Javascript
JavaScript实现重力下落与弹性效果的方法分析
2017/12/20 Javascript
Vue 进入/离开动画效果
2017/12/26 Javascript
解决Vue中引入swiper,在数据渲染的时候,发生不滑动的问题
2018/09/27 Javascript
React+Antd+Redux实现待办事件的方法
2019/03/14 Javascript
vue使用代理解决请求跨域问题详解
2019/07/24 Javascript
实用的 vue tags 创建缓存导航的过程实现
2020/12/03 Vue.js
Python标准库os.path包、glob包使用实例
2014/11/25 Python
python中while循环语句用法简单实例
2015/05/07 Python
python爬虫之百度API调用方法
2017/06/11 Python
python将txt文件读入为np.array的方法
2018/10/30 Python
python操作openpyxl导出Excel 设置单元格格式及合并处理代码实例
2019/08/27 Python
python+OpenCV实现车牌号码识别
2019/11/08 Python
python3 pathlib库Path类方法总结
2019/12/26 Python
python 画图 图例自由定义方式
2020/04/17 Python
python爬虫泛滥的解决方法详解
2020/11/25 Python
CSS3的文字阴影—text-shadow的使用方法
2012/12/25 HTML / CSS
怀旧收藏品和经典纪念品:Betty’s Attic
2018/08/29 全球购物
应届生.NET方向面试题
2015/05/23 面试题
戒毒悔改检讨书
2014/09/21 职场文书
大学生学年个人总结
2015/02/15 职场文书
numpy数据类型dtype转换实现
2021/04/24 Python
python实现黄金分割法的示例代码
2021/04/28 Python
GoFrame框架数据校验之校验结果Error接口对象
2022/06/21 Golang