JavaScript HTML5脚本编程——“跨文档消息传递”的注意要点

跨文档消息传送（cross-document messaging），有时候也简称为XDM，指的是来自不同域的页面间传递消息。例如，www.wrox.com域中的一个页面与一个位于内嵌框架中的p2p.wrox.com域中的页面通信。

XDM的核心是

postMessage()方法。在HTML5规范中，除了XDM部分之外的其它部分也会提到这个方法名，但都是为了同一个目的：向另一个地方传递数据。对于XDM而言，“另一个地方”指的是包含在当前页面中的iframe元素，或者由当前页面弹出的窗口。
postMessage()方法接收两个参数：一条消息和一个表示消息接收方来自哪个域的字符串。

第二个参数对保障安全通信非常重要，可以防止浏览器把消息发送到不安全的地方。来看下面的例子。

var iframWindow = document.getElementById("myframe").contentWindow;
iframWindow.postMessage("A secret", "http://www.w3cmm.com");

接收到XDM消息时，会触发window对象的message事件。这个事件是以异步形式触发的，因此从发送消息到接受消息（触发接受窗口的message事件）可能要经过一段时间的延迟。触发message事件后，传递给

onmessage处理程序的事件对象

包含以下三方面的重要信息：

data:作为postMessage()第一个参数传入的字符串数据。
origin:发送消息的文档所在的域，例如“http://www.w3cmm.com”。
source：发送消息的文档的window对象的代理。这个代理对象主要用于在发送上一条消息的窗口中调用postMessage()方法。如果发送消息的窗口来自同一个域，那这个对象就是window。

接受到消息后验证发送窗口的来源是至关重要的。基本的检测模式如下。

EventUtil.addHandler(window, "message", function (event) {//确保发送消息的域是已知的域if (event.origin == "http://www.w3cmm.com") {//处理接收到的数据processMessage(event.data);//可选：向来源窗口发送回执event.source.postMessage("Received!", "http://p2p.w3cmm.com");}
});

还是要提醒大家，event.source大多数情况下只是window对象的代理，并非实际的window对象。不能通过这个代理对象访问window对象的其它任何信息。使用postMessage()时，最好还是只传字符串。最佳选择是先在要传入的数据上调用JSON.stringify()，通过postMessage()传入得到的字符串，然后再在onmessage事件处理程序中调用JSON.parse()。

JavaScript HTML5脚本编程——“跨文档消息传递”的注意要点相关推荐

H5 postMessage跨文档消息传递
视频课堂https://edu.csdn.net/course/play/7621 父页面 <!DOCTYPE html> <html><frameset cols=&q ...
HTML5 跨文档消息传输
对窗口对象的message事件进行监听 window.addEventListener("message", function(event) {//处理程序代码 },false); ...
unity3d 脚本参考-技术文档
unity3d 脚本参考-技术文档核心提示:一.脚本概览这是一个关于Unity内部脚本如何工作的简单概览.Unity内部的脚本,是通过附加自定义脚本对象到游戏物体组成的.在脚本对象内部不同志的函数被 ...
shell实例第0讲：shell脚本完整pdf文档下载
shell脚本完整pdf文档下载链接:https://pan.baidu.com/s/10NTBAHv0zyP-wDnlblVvLg 提取码:6myf shell脚本完整pdf文档目录如下:
同域下跨文档通信iframe和window.open
1.iframe标签可以嵌套另一个标签,并且可以通过js去访问被包含的页面的window对象,从而操作该页面下documentElement,如下: <!DOCTYPE HTML> < ...
HTML5开发APP技术文档
HTML5开发APP技术文档一.环境参数 1.技术语言:HTML.CSS.ES6.Node.js等: 2.框架:Vue.js 2.x.Cordova: 3.开发系统:mac.windows等: ...
淘宝资深java技术专家整理分享java异步编程实战文档
前言本文由淘宝资深java技术专家爆肝整理分享的java异步编程实战文档,针对常见异步编程场景,从编程语言.开发框架等角度深入讲解异步编程的原理和方法,每个技术点都附有案例代码! 通常Java开发人 ...
JavaScript编程：文档对象模型DOM
5.文档对象模型DOM JS里的DOM和XML里的DOM不同,但是解析方式是一样的. document.getElementByID("id")根据ID获得元素节点. 创建和操作节 ...
微软编程规范(文档)
项目编程规范第一章概述. 5 术语定义. 5 Pascal 大小写. 5 Camel 大小写. 5 文件命名组织. 5 1.3.1文件命名. 5 1.3.2文件注释. 5 第二章代码外观. ...

JavaScript HTML5脚本编程——“跨文档消息传递”的注意要点

JavaScript HTML5脚本编程——“跨文档消息传递”的注意要点相关推荐

最新文章

热门文章