详解应用postMessage处理iframe跨域通讯难题

2020-10-09 21:14 jianzhan

这周碰到1个令人头疼的要求:要在我的web新项目中嵌入另外一个第3方web新项目。第1時间想起的便是用iframe了,但难题来了,我和第3方web新项目是有互动的,这就违背同宗对策了,解决跨域难题是最使人头疼的事之1。

要求是这样的,在我的网页页面点一下1些按钮,要即时意见反馈到iframe子网页页面,子网页页面再开展回应。

那时候头脑里第1時间想起的处理计划方案是:用NGINX把两个新项目代理商到同1网站域名下。但这样好像有点小题大做了,有木有更便捷便捷的方式呢?

在window目标下有个postMessage方式,是专业用来处理跨域通讯难题的。

有关postMessage的详尽详细介绍请戳这里,但是MDN的文本文档太详尽了,致使一些同学看完還是1脸懵逼,下面大家就看来看如何用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了。

大家先试着从父网页页面向子网页页面推送1条信息:

// idnex.html

//获得iframe元素
iFrame = document.getElementById('myframe')

//iframe载入结束后再推送信息,不然子网页页面接受不到message
iFrame.onload = function(){

  //iframe载入完马上推送1条信息
  iFrame.contentWindow.postMessage('MessageFromIndex1','*');

}

大家了解postMessage是挂载在window目标上的,因此等iframe载入结束后,用iFrame.contentWindow获得到iframe的window目标,随后启用postMessage方式,非常于给子网页页面推送了1条信息。

postMessage方式第1个主要参数是要推送的数据信息,能够是任何初始种类的数据信息。

Gecko 6.0 (Firefox 6.0 / Thunderbird 6.0 / SeaMonkey 2.3)以前,第1个主要参数务必是1个标识符串。

postMessage方式第2个主要参数能够设定要推送到哪一个url,假如当今子网页页面的url和设定的不1致,则会推送不成功,大家设定为*,意味着全部url都容许推送。

postMessage方式也有第3个主要参数,属于高級用法,这里不做探讨,能够稍后去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为1个目标:

大伙儿能够到postMessage-demo把编码clone下来运作试一试。

以上便是本文的所有內容,期待对大伙儿的学习培训有一定的协助,也期待大伙儿多多适用脚本制作之家。