使用postMessage怎么解决iframe跨域通信
这篇文章将为大家详细讲解有关使用postMessage怎么解决iframe跨域通信,文章内容质量较高,因此小编分享给大家做个参考,希望大家阅读完这篇文章后对相关知识有一定的了解。
尼木网站制作公司哪家好,找创新互联建站!从网页设计、网站建设、微信开发、APP开发、成都响应式网站建设公司等网站项目制作,到程序开发,运营维护。创新互联建站从2013年成立到现在10年的时间,我们拥有了丰富的建站经验和运维经验,来保证我们的工作的顺利进行。专注于网站建设就选创新互联建站。
首先我们模拟场景,假设有两个不同源的页面,iframePage.html是index.html的子页面:
this is index
this is iframePage
现在这两个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方法第一个参数是要发送的数据,可以是任何原始类型的数据。
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怎么解决iframe跨域通信就分享到这里了,希望以上内容可以对大家有一定的帮助,可以学到更多知识。如果觉得文章不错,可以把它分享出去让更多的人看到。
文章名称:使用postMessage怎么解决iframe跨域通信
标题来源:http://myzitong.com/article/ppjgej.html