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秒后
【思考题】
【题目1】请阐述querySelector与querySelectorAll的作用与区别
【题目2】请将下面1，3，5项p标签的文字设置为红色(red)
【题目3】html5 History的出现主要为了解决哪些问题？常见应用场景是？
【题目4】关于postMessage(message,orign,[transfer])，下列说法正确的是（多选）
A. postMessage()可以向另外一个窗口发送消息, 该方法是window下的一个全局方法
B. 到目前为止，文档规定message只允许传字符串
C. transfer是转移消息对象，可不传
D. orign指定框架中文档来源的域，如来源匹配，消息会传递到内嵌框架中，否则postMessage()会在控制台报错。
答案：
【题目1】
querySelector是取得第一个元素没有则返回null，querySelectorAll是取得所有符合要求的元素，并且返回NodeList对象。
【题目2】
<style>
div.p-con p:nth-child(odd){color:"red"}
</style>
【题目3】
- 单页应用
- 实现网页无刷新更新数据的同时，解决浏览器无法前进/后退的问题
【题目4】
AC
扫一扫
342
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
