跨文档消息通讯
程序员文章站
2024-01-12 20:32:52
...
HTML5跨文档消息通讯
HTML5跨文档消息通讯
跨文档通讯概念
文档对象不是document对象,HTML中文档是指html文件,跨文档指的是跨html文件;html文件被抽象成BOM概念,BOM的核心对象是window,HTML文档在程序中的代名词是window对象,而非document对象,document代表的是BOM模型下的加载到内存中的文档对象模型对外报露的API接口。html文档是一个静态概念,BOM模型和DOM模型是动态概念,是文档加载完成后为了给前端工程师开发而提供的一套接口。
定义:
- 跨文档详细传送(cross-document messaging),有时候也简称为XDM,指的是来自不同域的页面间传递消息。
使用场景:
- 内嵌框架(iframe)和其父文档互相进行数据传输或者通讯。
跨文档通讯
window.postMessage(message, origin, [transfer])
-
message: 消息对象
最早是作为“永远都是字符串”来实现的,后来参数定义修改为允许传入任何数据结构。 它是要将发送到其他window的数据,将会被结构化克隆算法序列化。这意味着你可以不受限制的将数据对象安全的传递给目标窗口,而无需自己序列化。
-
origin:域信息
指定框架中的文档来源的域。如来源匹配,消息会传递到内嵌框架中;否则postMessage()设么也不做。 这一限制可以避免窗口中的位置在你不知道的情况下发生改变。
-
transfer:转移消息对象(可选参数)
是一串和message同时传递的Transferable对象。
HTML5跨文档通讯案例
父文档为home.html,包含iframe内嵌框架,加载msg.html子文档。
通过iframe内嵌框架的onload(msg.html加载完毕时触发回调),回调sendMsg函数。
通过postMessage()函数向子文档msg.html发送消息,并设置对应参数。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>跨文档消息传输示例</title>
</head>
<body>
<iframe src="file:///Users/mac/Desktop/code/HTML5/html5-msg.html" width="400" height="400" onload="sendMsg();" id="iframe"></iframe>
<div id="div1">
</div>
<script type="text/javascript">
window.addEventListener("message",function(event){
document.getElementById('div1').innerHTML='从event.origin='+event.origin+',那里来的消息event.data='+event.data;
});
//向id为iframe内嵌框架中发送一条消息
function sendMsg(){
//获取框架中的window
var iframeWindow = document.getElementById("iframe").contentWindow;
var information={"张三":10,"李四":20,"王五":30};
var jsontext=JSON.stringify(information);
setTimeout(function(){
//iframe窗口加载完成,使用postMessage向iframe内发送消息
//第一个参数为:消息内容
//第二个参数为:接收消息的对象窗口url,一般与iframe的src一致
iframeWindow.postMessage(jsontext,"file:///Users/mac/Desktop/code/HTML5/msg.html");
},2000);
}
</script>
</body>
</html>
<!--
Mac:
chrome49以前版本
open -a "Google Chrome" --args --disable-web-security
chrome49以后版本
open -a /Applications/Google\ Chrome.app --args --disable-web-security --user-data-dir
Safari
open -a '/Applications/Safari.app' --args --disable-web-security
Window:
chrome.exe --disable-web-security
-->
子文档msg.html,注册window对象的onMessage事件,当文档收到消息后会执行函数。
回调函数首先通过event对象确定域是否安全,然后处理推送过来的的消息,并且最终向来源文档推送消息。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="div1">this is div1</div>
<script>
window.addEventListener("message",function(event){
document.getElementById('div1').innerHTML='从event.origin='+event.origin+',那里来的消息event.data='+event.data;
setTimeout(function(){
event.source.postMessage("我已经接收到数据了,谢谢!",event.origin);
},2000);
});
</script>
</body>
</html>
loading后
2秒后
又经过2秒后