首页 > 网页制作 > html5

使用iframe+postMessage实现页面跨域通信的示例代码

admin html5 2022-02-05 22:47:52 iframe   postMessage   跨域通信"

通常情况下,对于两个不同页面的脚本,只有当执行它们的页面位于具有相同的协议(通常为https),端口号(443为https的默认值),以及主机时,这两个脚本才能相互通信。而在实际项目开发过程中,经常会利用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):




    
    父页面


    
    


2.子页面(url为http://www.a.com/iframepage.html)




    
    子页面


    
这里是子页面

postMessage方法被调用时,会在所有页面脚本执行完毕之后像目标窗口派发一个 MessageEvent 消息,该MessageEvent消息有四个属性需要注意:

type:表示该message的类型

data:为postMessage的第一个参数

origin:表示调用postMessage方法窗口的源

source:记录调用postMessage方法的窗口对象

特别注意:
1.一定要等A页面嵌入的B页面加载完成之后,再进行postMessage跨域通信
2.一定要对origin做判断,去掉不是来自我们目标窗口的origin,防止来自其他origin的攻击

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持潘少俊衡。

版权声明

本文仅代表作者观点,不代表本站立场。
本文系作者授权发表,未经许可,不得转载。
本文地址:/web/html5/74057.html

留言与评论(共有 0 条评论)
   
验证码:

潘少俊衡

| 桂ICP备2023010378号-4

Powered By EmpireCMS

爱享小站

中德益农

谷姐神农

环亚肥料

使用手机软件扫描微信二维码

关注我们可获取更多热点资讯

感谢潘少俊衡友情技术支持