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

日期：2021-01-19 类型：科技新闻我要分享

关键词：公众号小程序，小程序正规价格表，微信群签到小程序，网络抽签小程序，个人做小程序需要什么

这周碰到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下来运作试一试。

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

上一篇：这个节日来了，你的手机微信抽奖主题活动能够返回下一篇：没有了