介绍 otherWindow.postMessage(消息,targetOrigin,,[转]); & lt; ! DOCTYPE html>
& lt; html lang=癳n"祝辞
& lt; head>
,,,& lt; meta charset=癠TF-8"比;
,,,& lt; title>父页面& lt;/title>
& lt;/head>
& lt; body>
,,,& lt; iframe id=癶ttps://www.yisu.com/zixun/child", src=" http://www.a.com/iframepage.html ">
<>脚本
窗口。onload=function () {
. getelementbyid(“孩子”).contentWindow.postMessage(“主页面传递的消息”,“http://www.a.com/iframepage.html”)
}
窗口。addEventListener(“消息”,函数(事件){//父获取子传递的消息
如果事件。起源==" http://www.a.com ") {//可以在这里做一些逻辑操作
}
},假)>
这篇文章将为大家详细讲解有关使用iframe和postMessage怎么实现页面跨域通信,文章内容质量较高,因此小编分享给大家做个参考,希望大家阅读完这篇文章后对相关知识有一定的了解。
通常情况下,对于两个不同页面的脚本,只有当执行它们的页面位于具有相同的协议(通常为https),端口号(443为https的默认值),以及主机时,这两个脚本才能相互通信。而在实际项目开发过程中,经常会利用内嵌框架在一个父页面中嵌入另外一个子页面,或者在一个父页面中弹出另一个页面,由于同源策略的限制,父子页面之间的脚本无法实现通信,而使用postMessage方法就实现了父子页面之间的跨域信息传递。
语法:
otherWindow:其他页面的引用,例如,iframe的contentWindow属性,或者执行window.open返回的窗口对象。
信息:将要传递到另一个页面的数据(可以不受限制的将数据对象安全的传送给目标窗口而无需自己序列化,原因是因为采用了结构化克隆算法).
targetOrigin:通过窗口的起源属性来指定哪些窗口能接收到消息事件,其值可以是一个字符串“*”(表示无限制)或者一个Url。只有当目标窗口的协议,主机地址,端口号和targetOrigin完全匹配时,目标窗口才会收到消息信息。为了防止信息泄露,通常情况下都会指定特定的Url。
传输:可选参数。
使用方法:
1。父页面:(网址为http://www.b.com/main.html):