使用 postMessage 解决 iframe 跨域通讯问题

时间 2019-11-08

标签使用 postmessage 解决 iframe 通讯问题栏目 HTML 繁體版

原文原文链接

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

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

当时脑子里第一时间想到的解决方案是：用NGINX把两个项目代理到同一域名下。但这样彷佛有点小题大作了，有没有更方便快捷的方法呢？java

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

关于postMessage的详细介绍请戳这里，不过MDN的文档太详细了，致使有些同窗看完仍是一脸懵逼，下面咱们就来看看怎么用postMessage实现iframe跨域通讯，当你会用了以后再回去看文档，感受是彻底不一样的。github

首先咱们模拟场景，假设有两个不一样源的页面，iframePage.html是index.html的子页面：web

<!-- 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方法第一个参数是要发送的数据，能够是任何原始类型的数据。post

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：

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-demo把代码clone下来运行试试看。

喜欢本文的朋友能够关注个人微信公众号，不按期推送一些好文。

本文出自Rockjins Blog，转载请与做者联系。不然将追究法律责任。