2019-03-31 iframe 子页面 postMessage 到父页面

参考链接：使用 postMessage 解决 iframe 跨域通信问题

iframePage.html是index.html的子页面

  
this is index

  







  
this is iframePage

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

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

// index.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方法第一个参数是要发送的数据，可以是任何原始类型的数据。

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

消息发送到iframePage.html，我们来接收message：

// iframePage.html

//回调函数

function receiveMessageFromIndex ( event ) {

  console.log( 'receiveMessageFromIndex', event )

}

//监听message事件

window.addEventListener("message", receiveMessageFromIndex, false);

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

image.png

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为一个对象：

image.png

对于想要传送的数据，可以将需要传送的数据 data 成为一个对象，拥有不同的属性，通过一个属性进行数据匹配从而子页面可以判断是否为特定的父页面发送的消息。