用HTML5里的window.postMessage在两个网页间传递数据
说明
window.postMessage()方法可以安全地实现Window对象之间的跨域通信。例如,在一个页面和它生成的弹出窗口之间,或者是页面和嵌入其中的iframe之间。
通常情况下,不同页面上的脚本允许彼此访问,当且仅当它们源自的页面共享相同的协议,端口号和主机(也称为“同源策略”)。window.postMessage()提供了一个受控的机制来安全地规避这个限制(如果使用得当的话)。
一般来说,一个窗口可以获得对另一个窗口的引用(例如,通过targetWindow=window.opener),然后使用targetWindow.postMessage()在其上派发MessageEvent。接收窗口随后可根据需要自行处理此事件。传递给window.postMessage()的参数通过事件对象暴露给接收窗口。
发送端
postMessage程序
1 2 3 4 5 6 7 | 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"); }); |
发送消息的基本语法:
1 | targetWindow.postMessage(message, targetOrigin, [transfer]); |
targetWindow
targetWindow就是接收消息的窗口的引用。 获得该引用的方法包括:
- Window.open
- Window.opener
- HTMLIFrameElement.contentWindow
- Window.parent
- Window.frames +索引值
message
message就是要发送到目标窗口的消息。 数据使用结构化克隆算法进行序列化。 这意味着我们可以将各种各样的数据对象安全地传递到目标窗口,而无需自己对其进行序列化。
targetOrigin
targetOrigin就是指定目标窗口的来源,必须与消息发送目标相一致,可以是字符串“*”或URI。 *表示任何目标窗口都可接收,为安全起见,请一定要明确提定接收方的URI。
transfer
transfer是可选参数
接收端
目标窗口通过执行下面的JavaScript来侦听发送过来的消息:
1 2 3 4 5 | 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表示发送消息的窗口对象的引用; 我们可以用这个引用来建立两个不同来源的窗口之间的双向通信。
完整程序
发送程序
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 | <! DOCTYPE HTML> < html > < head > < meta charset="utf-8"> < title >42度空间-window.postMessage()跨域消息传递</ title > </ head > < body > < div > < input id="text" type="text" value="42度空间" /> < button id="send" >发送消息</ button > </ div > < iframe id="receiver" src="http://res.42du.cn/static/html/receiver.html" width="500" height="60"> < p >你的浏览器不支持IFrame。</ p > </ iframe > < script > window.onload = function() { 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"); }); } </ script > </ body > </ html > |
接收程序
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 | <! DOCTYPE HTML> < html > < head > < meta charset="utf-8"> < title >42度空间-从www.42du.cn接收消息</ title > </ head > < body > < div id="message"> Hello World! </ div > < script > window.onload = function() { var messageEle = document.getElementById('message'); window.addEventListener('message', function (e) { alert(e.origin); if (e.origin !== "http://www.42du.cn") { return; } messageEle.innerHTML = "从"+ e.origin +"收到消息: " + e.data; }); } </ script > </ body > </ html > |
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· .NET Core 中如何实现缓存的预热?
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列:向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· Linux系列:如何用heaptrack跟踪.NET程序的非托管内存泄露
· TypeScript + Deepseek 打造卜卦网站:技术与玄学的结合
· Manus的开源复刻OpenManus初探
· AI 智能体引爆开源社区「GitHub 热点速览」
· 三行代码完成国际化适配,妙~啊~
· .NET Core 中如何实现缓存的预热?