摘要:说明方法可以安全地实现对象之间的跨域通信。接收窗口随后可根据需要自行处理此事件。传递给的参数通过事件对象暴露给接收窗口。发送端程序发送消息的基本语法就是接收消息的窗口的引用。接收程序度空间从接收消息从收到消息演示地址跨域消息传递
说明
window.postMessage()方法可以安全地实现Window对象之间的跨域通信。例如,在一个页面和它生成的弹出窗口之间,或者是页面和嵌入其中的iframe之间。
通常情况下,不同页面上的脚本允许彼此访问,当且仅当它们源自的页面共享相同的协议,端口号和主机(也称为“同源策略”)。window.postMessage()提供了一个受控的机制来安全地规避这个限制(如果使用得当的话)。
一般来说,一个窗口可以获得对另一个窗口的引用(例如,通过targetWindow=window.opener),然后使用targetWindow.postMessage()在其上派发MessageEvent。接收窗口随后可根据需要自行处理此事件。传递给window.postMessage()的参数通过事件对象暴露给接收窗口。
发送端 postMessage程序var receiver = document.getElementById("receiver").contentWindow; var btn = document.getElementById("send"); btn.addEventListener("click", function (e) { e.preventDefault(); var val = document.getElementById("text").value; receiver.postMessage("Hello "+val+"!", "http://res.42du.cn"); });发送消息的基本语法:
targetWindow.postMessage(message, targetOrigin, [transfer]);targetWindow
targetWindow就是接收消息的窗口的引用。 获得该引用的方法包括:
Window.open
Window.opener
HTMLIFrameElement.contentWindow
Window.parent
Window.frames +索引值
messagemessage就是要发送到目标窗口的消息。 数据使用结构化克隆算法进行序列化。 这意味着我们可以将各种各样的数据对象安全地传递到目标窗口,而无需自己对其进行序列化。
targetOrigintargetOrigin就是指定目标窗口的来源,必须与消息发送目标相一致,可以是字符串“”或URI。 表示任何目标窗口都可接收,为安全起见,请一定要明确提定接收方的URI。
transfertransfer是可选参数
接收端目标窗口通过执行下面的JavaScript来侦听发送过来的消息:
window.addEventListener("message", receiveMessage, false); function receiveMessage(event){ if (event.origin !== "http://www.42du.cn") return; }
event对象有三个属性,分别是origin,data和source。event.data表示接收到的消息;event.origin表示postMessage的发送来源,包括协议,域名和端口;event.source表示发送消息的窗口对象的引用; 我们可以用这个引用来建立两个不同来源的窗口之间的双向通信。
完整程序 发送程序接收程序42度空间-window.postMessage()跨域消息传递
演示地址42度空间-从www.42du.cn接收消息 Hello World!
[跨域消息传递](http://www.42du.cn/paper/11)
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/93273.html
摘要:由此可以看出,同源策略确实是必不可少的,那么它会带来哪些限制呢和无法读取。由于浏览器的同源策略,在网页端出现了这个跨域的问题,然而我们发现,所有的属性并没有受到相关的限制,比如等。 本文按照政治问答题必备套路分为以下3个部分: 为什么要跨域? 跨域是什么? 如何实现跨域? Section1、为什么要跨域? 自古以来(1995年起),为了用户的信息安全,浏览器就引入了同源策略。那么同...
阅读 728·2023-04-25 15:13
阅读 1360·2021-11-22 12:03
阅读 796·2021-11-19 09:40
阅读 1849·2021-11-17 09:38
阅读 1627·2021-11-08 13:18
阅读 630·2021-09-02 15:15
阅读 1739·2019-08-30 15:54
阅读 2546·2019-08-30 11:12