这篇文章将为大家详细讲解有关使用postMessage怎么解决iframe跨域通信，文章内容质量较高，因此小编分享给大家做个参考，希望大家阅读完这篇文章后对相关知识有一定的了解。
成都创新互联公司服务项目包括东河网站建设、
东河网站制作、东河网页制作以及东河网络营销策划等。多年来，我们专注于互联网行业，利用自身积累的技术优势、行业经验、深度合作伙伴关系等，向广大中小型企业、政府机构等提供互联网行业的解决方案，
东河网站推广取得了明显的社会效益与经济效益。目前，我们服务的客户以成都为中心已经辐射到东河省份的部分城市，未来相信会继续扩大服务区域并继续获得客户的支持与信任！
首先我们模拟场景，假设有两个不同源的页面，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跨域通信-创新互联
当前URL：
http://kswjz.com/article/dciede.html
