《JavaScript高级程序设计》笔记：HTML5脚本编程（16）

时间：2021-07-02 18:14:28

跨文档消息传递

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

XDM的核心是postMessage()方法。在HTML5规范中，除了XDM部分之外的其他部分也会提到这个方法名，但都是为了同一个目的：向另一个地方传递数据。对于XDM而言，“另一个地方”指的是包含在当前页面中的<iframe>元素，或者由当前页面弹出的窗口。

postMessage()方法接收两个参数：一条消息和一个表示消息接收方来自哪个域的字符串。第二个参数对保障安全通信非常重要，可以防止浏览器把消息发送到不安全的地方。

//注意所有支持XDM的浏览器也支持iframe的contentWindow属性

var iframeWindow = document.getElementById("myframe").contentWindow;

iframeWindow.postMessage("A secret","http://www.wrox.com");

最后一行代码尝试向内嵌框架中发送一条消息，并指定框架中的文档必须来源于http:www.wrox.com域。如果来源匹配，消息会传递到内嵌框架中；否则，postMessage()什么也不做。如果传给postMessage()的第二个参数是“*”，则表示可以把消息发送给来自任何域的文档，但我们不推荐这样做。

接收到XDM消息时，会触发window对象的message事件。这个事件是以异步形式触发的，因此，从发送消息到接收消息（触发接收窗口的message事件）可能要经过一段时间的延迟。触发message事件后，传递给onmessage处理程序的事件对象包含以下三方面的重要信息。

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

    if(event.origin == 'http://www.wrox.com'){

        //处理接收到的数据

        processMessage(event.data);

        //可选:向来源窗口发送回执

        event.source.postMessage("Received!","http://p2p.wrox.com");

    }

},false);

XDM还有一些怪异之处。postMessage()的第一个参数最早是作为“永远都是字符串来实现的”，但后来改变了可以使用任意结构了。并非所有浏览器都支持任意结构，所以最好还是传入字符串，即在要传递数据之前调用JSON.stringify()方法，然后在onmessage事件处理程序中调用JSON.parse()。

原生拖放

拖动事件

拖动某元素时，将依次触发下列事件：

  • （1）dragstart
  • （2）drag
  • （3）dragend

上述三个事件的目标都是被拖动的元素。

当某个元素被拖动到一个有效的放置目标上时，下列事件会依次执行：

（1）dragenter

（2）dragover

（2）dragleave或drop

只要有元素被拖动到放置目标上，就会触发dragenter事件（类似于mouseover事件）。紧随其后的是dragover事件，而且在被拖动的元素还在放置目标的范围内移动时，就会持续触发该事件。如果元素被拖出了放置目标，dragover事件就不再发生，但会触发dragleave事件（类似于mouseout事件）。如果元素被放到了放置目标中，则会触发drop事件而不是dragleave事件。上述三个事件的目标都是作为放置目标的元素。

自定义放置目标

在拖动元素经过某些无效放置目标时，可以看到一种特殊的光标（圆环中有一条反斜线），表示不能放置。虽然所有元素都支持放置目标事件，但这些元素默认是不允许放置的。如果拖动元素经过不允许放置的元素，无论用户如果操作，都不会发生drop事件。不过，你可以把任何元素变成有效的放置目标，方法是重写dragenter和dragover事件的默认行为。例如，假设有一个ID为“droptarget”的<div>元素，可以用如下代码将它变成一个放置目标。

var droptarget = document.getElementById("droptarget");

EventUtil.addHandler(droptarget,"dragover",function(){

    EventUtil.preventDefault(event);

});

EventUtil.addHandler(droptarget,"dragenter",function(){

    EventUtil.preventDefault(event);

以上代码执行后，你就会发现当拖动着元素移动到放置目标上时，光标变成了允许放置的符号。当然，释放鼠标也会触发drop事件。

在Firefox3.5中，放置事件的默认行为是打开被放到放置目标上的URL。换句话说，如果是把图像拖动到放置目标上，页面就会转向图像文件；而如果是把文本拖放到放置目标上，则会导致无效URL错误。因此，为了让Firefox支持正常的拖放，还要取消drop事件的默认行为，阻止它打开URL：

EventUtil.addHandler(droptarget,"drop",function(){

    EventUtil.preventDefault(event);

});

dataTransfer对象

dataTransfer对象是事件对象的一个属性，用于从被拖动元素向放置目标传递字符串格式的数据。因为他是事件对象的属性，所以只能在拖动事件的事件处理程序中访问dataTransfer对象。

dataTransfer对象有两个主要的方法：getData()和setData()。getData()可以取得由setData()保存的值。setData()方法的第一个参数，也是getData()方法唯一的一个参数，是一个字符串，表示保存的数据类型，取值为“text”或“URL”，如下代码：

//设置和接收文本数据

event.dataTransfer.setData("text","some text");

var text = event.dataTransfer.getData("text");

//设置和接收url

event.dataTransfer.setData("URL","http://www.wrox.com/");

var url = event.dataTransfer.getData("URL");

IE只定义了“text”和“URL”两种有效的数据类型，而HTML5则对此加以扩展，允许指定各种MIME类型。考虑到向后兼容，HTML5也支持“text”和“URL”，但这两种类型会被映射为“text/plain”和“text/url-list”。

实际上，dataTransfer对象可以为每种MIME类型都保存一个值。换句话说，同时在这个对象中保存一段文本和一个URL不会有任何问题。不过，保存在dataTransfer对象的数据只能在drop事件处理程序中读取。如果在ondrop处理程序中没有读到数据，那就是dataTransfer对象已经被被销毁了，数据也丢失了。

Firfox在其第五个版本之前不能将"URL"和“text”映射为“text/url-list”和“text/plain”，但却能把“Text”映射为“text/plain”,为了更好的兼容浏览器，可使用如下代码：

var dataTransfer = event.dataTransfer;

//读取URL

var url = dataTransfer.getData('url') || dataTransfer.getData("text/url-list");

//读取文本

var text = dataTransfer.getData("Text");

注意：一定要把短数据类型放到前面，因为IE10以及之前的版本不支持扩展的MIME类型，而他们在遇到无法识别的数据类型时，会抛出错误。

dropEffect和effectAllowed

其中，通过dropEffect属性可以知道被拖动的元素能够执行哪种放置行为。这个属性有4个可能的值。

  • none：不能把拖动的元素放在这里。这是除文本框之外所有元素的默认值。
  • move：应该把拖动的元素移动到放置目标。
  • copy：应该把拖动的元素复制到放置目标。
  • link：表示放置目标会打开拖动的元素（但拖动的元素必须是一个链接，有URL）。

要使用dropEffect属性，必须在ondragenter事件处理程序中针对放置目标来设置它。

dropEffect属性只有搭配effectAllowed属性才有用。effectAllowed属性表示允许拖动元素的哪种dropEffect。effectAllowed属性有以下可能的值：

  • uninitialized：没有给被拖动的元素设置任何放置行为。
  • none：被拖动的元素不能有任何行为。
  • copy：只允许值为“copy”的dropEffect。
  • link：只允许值为“link”的dropEffect。
  • move：只允许值为“move”的dropEffect。
  • copyLink：只允许值为“copy”和“link”的dropEffect。
  • copyMove：只允许值为“copy”和“move”的dropEffect。
  • linkMove：只允许值为“link”和“move”的dropEffect。
  • all：允许任意的dropEffect。

必须在ondragstart事件处理程序中设置effectAllowed属性。

可拖动

默认情况下，图像、链接、文本是可以拖动的，文本只有在被选中的情况下才能拖动，而图像和链接在任何时候都可以拖动。

让其它元素可以拖动，HTML5为所有的HTML元素规定了一个draggable属性。

<!--让图像不可拖动-->

<img src="data:images/avatar.png" draggable="false"/>

<!--让这个元素可以拖动-->

<div draggable="true">可拖动的元素</div>

其它成员

HTML5规范规定dataTransfer对象还有下列属性和方法：

  • addElement(element)：为拖动操作添加一个元素。添加这个元素只影响数据（即增加作为拖动源而响应回调的对象），不会影响拖动操作时页面元素的外观。
  • clearData(format)：清除以特定格式保存的数据。
  • setDragImage(element,x,y)：指定一副图像，当拖动发生时，显示在光标下方。这个方法接收的三个参数分别为要显示的HTML元素和光标在图像中的x、y坐标。其中，HTML元素可以是一副图像，也可以是其它元素。
  • types：当前保存的数据类型。这是一个类似数组的集合，以“text”这样的字符串形式保存着数据类型。

媒体元素

<audio>和<video>


相关文章