JavaScript HTML5剧本编程——“跨文档音讯通报”的注重要点

2019年8月30日 198次阅读 来源: JS菌

跨文档音讯传送（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()。

    原文作者：JS菌
    原文地址: https://segmentfault.com/a/1190000004414858
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞