通常情况下，对于两个不同页面的脚本，只有当执行它们的页面位于具有相同的协议（通常为https），端口号（443为https的默认值），以及主机时，这两个脚英雄联盟fps低本才能相互通信。而在实际项目开发过程中，经常会利用iframe在一个父页面中嵌入另外一个子页面，或者在一个父页面中弹出另一个页面，由于同源策略的限制，父子页面之间的脚本无法实现通信，而使用postmessage方法就实现了父子页面之间的跨域信息传递。
语法：
otherwindow.postmessage(message, targetorigin, [transfer]);
otherwindow:其他页面的引用，例如，iframe的contentwindow属性，或者执行window.open返回的窗口对象。
message:将要传递到另一个页面的数据（可以不受限制的将数据对象安全的传送给目标窗口而无需自己序列化，原因是因为采用了结构化克隆算法）。
targetorigin:通过窗口的origin属性来指定哪些窗口能接收到消息事件,其值可以是一个字符串”*”（表示无限制）或者一个url。只有当目标窗口的协议、主机地址、端口号和targetorigin完全匹配时，重庆整合网络营销目标窗口才会收到message信息。为了防止信息泄露，通常情况下都会指定特定的url。
transfer：可选参数。
使用方法：
1.父页面：(url为http://www.b.com/main.html)：
<!doctype html><html lang="en"><head> <meta chart="utf-8"> <title>父页面</title></head><body> <iframe id="child" src="ht主干是什么意思tp://www.a.com/iframepage.html"></iframe> <script> window.on现在的主要矛盾load = function(){ document.getelementbyid("child").contentwindow.postmessage("主页面传递的消息","http://www.a.com/iframepage.html") } window.addeventlistener('message', function(event){ //父获取子传递的消息 if(event.爱语录origin == "http://www.a.com"){ //可以在这里做一些逻辑操作 } }, fal) </script></body></html>2.子页面(url为http://www.a.com/iframepage.html)
<!doctype html><html lang="en"><head> <meta chart="utf-8"> <title>子页面</title></head><body> <div>这里是子页面</div> <script> window.addeventlistener('message', function(event){ if(event.origin == "http://www.b.com"){ //可以在这里做一些操作 top.postmessage("子页面收到父页面传递来的消息", 'http://www.b.com/main.html')//子页面向父页面传递消息 } }, fal); </script></body></html>postmessage方法被调用时，会在所有页面脚本执行完毕之后像目标窗口派发一个 messageevent 消息，该messageevent消息有四个属性需要注意：
type：表示该message的类型
data：为postmessage的第一个参数
origin：表示调用postmessage方法窗口的源
source：记录调用postmessage方法的窗口对象
特别注意：
1.一定要等a页面嵌入的b页面加载完成之后，再进行postmessage跨域通信
2.一定要对origin做判断，去掉不是来自我们目标窗口的origin，防止来自其他origin的攻击
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持www.887551.com。
本文发布于:2023-04-07 09:34:47，感谢您对本站的认可！
本文链接：https://www.wtabcd.cn/fanwen/zuowen/2057ee0b098cc6c74cb5b86fefa6f207.html
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系，我们将在24小时内删除。
本文word下载地址：使用iframe+postMessage实现页面跨域通信的示例代码.doc
本文 PDF 下载地址：使用iframe+postMessage实现页面跨域通信的示例代码.pdf
| 留言与评论（共有 0 条评论） |
