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

cv角斗士

已于 2023-04-07 15:37:56 修改

阅读量3.5k

点赞数 2

文章标签： firefox javascript html

于 2023-04-07 15:11:15 首次发布

本文链接：https://blog.csdn.net/weixin_42208160/article/details/130012839

版权

父窗口给子窗口发送消息的方式:iFrame.contentWindow.postMessage(‘MessageFromIndex1’,‘*’);
其实就是在父窗口中操作子窗口发消息，然后让子窗口接收自己刚才发的消息。
子窗口给父窗口发送消息的方式： parent.postMessage( {msg: ‘MessageFromIframePage’}, ‘*’);
注意：此处parent === window.parent，即子窗口的父窗口其实就是在子窗口中操作父窗口发消息，然后让父窗口接收自己刚才发的消息。

总结：所谓的跨窗口发送消息，就是通过在别的窗口操作本窗口发送消息，然后本窗口再自己接收的方式实现。

首先我们模拟场景，假设有两个不同源的页面，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('这是给iframe发送的消息','*');

}

我们知道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( '我是iframe', event )
}

//监听message事件
window.addEventListener("message", receiveMessageFromIndex, false);

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

event对象中的data属性存放着我们从父页面传过来的数据，就这么简单！
让我们再试试从子页面发送数据给父页面：

// iframePage.html

//给父页面发送消息，data为对象
window.parent && window.parent.postMessage( { msg: '这是给index.html页面发送到消息'}, '*');

父页面接收数据：

//index.html

//回调函数
function receiveMessageFromIframePage (event) {
  console.log('我是index.html', event)
}

//监听message事件
window.addEventListener("message", receiveMessageFromIframePage, false);

我看看到，的确可以传输不同的数据，此时data为一个对象：
在这里插入图片描述

cv角斗士

关注

2
点赞
踩
10

收藏

觉得还不错? 一键收藏
0
评论
使用 postMessage 解决 iframe 跨域通信问题

是挂载在window对象上的，所以等iframe加载完毕后，用iFrame.contentWindow获取到iframe的window对象，然后调用postMessage方法，相当于给子页面发送了一条消息。postMessage方法第二个参数可以设置要发送到哪个url，如果当前子页面的url和设置的不一致，则会发送失败，我们设置为*，代表所有url都允许发送。总结：所谓的跨窗口发送消息，就是通过在别的窗口操作本窗口发送消息，然后本窗口再自己接收的方式实现。首先我们模拟场景，假设有两个不同源的页面，
复制链接

扫一扫