HTML5 脚本编程

JavaScript

跨文档消息传递

跨文档消息传递指的是在来自不同域的页面传递消息，简称 XDM。XDM 的核心是 postMessage()方法，这个方法接受两个参数，一条消息和一个表示消息接收方来自哪个域的字符串，第二个参数对于保障安全通信十分重要。

var iframeWindow = document.getElementById("myframe").contentWindow;
iframeWindow.postMessage("a secret", "http://www.wrox.com");

第二行代码尝试向内嵌的 iframe 发送一条消息，并制定框架中的文档必须来源于"http://www.wrox.com"，否则消息不会被发送。如果将第二个参数设置为"*"就不会对域进行限制。
接收到 XDM 消息时，会触发 window 对象的 message 事件，这个事件以异步形式触发。这个事件的事件对象包含以下三方面的信息。

• data：作为 postMessage()第一个参数传入的字符串数据。
• origin：发送消息的文档所在的域。
• source：发送消息的 window 对象的代理，这个代理对象主要用于在发送上一条消息的窗口中调用 postMessage()方法。

window.onmessage = function(e){
    if(e.origin == "http://www.wrox.com"){
        //处理接收到的数据
    }
    e.source.postMessage("Recived", "http://p2p.wrox.com")
}

原生拖放

拖放事件

在一次拖放过程中会发生依次触发下列事件：dragstart、drag、dragend。这三个事件的目标都是被拖动的元素。drag 事件会在拖动过程中被持续地触发，与 mousemove 事件相似。

当元素被拖动到一个有效的放置目标上的时候会依次触发下列事件：dragenter、dragover、dragleave 或者 drop。当被拖放目标在放置目标的范围内移动时会持续地触发 dragover 事件。

自定义放置目标

当元素在不允许放置的目标上释放时不会触发 drop 事件。可以通过取消 dragenter 和dragover 事件的默认行为将任何元素转变为允许放置的元素。

在 firefox 中放置事件的默认行为是打开被拖放的目标的 URL，因此我们还需要取消 drop 事件的默认行为。

dataTransfer 对象

拖放事件的事件对象拥有 dataTransfer 属性，这个属性用于从被拖放元素向放置目标传递字符串格式的数据。

dataTransfer 对象有两个主要的方法：getData()和 setData()。getData()方法取得数据，这个方法接受一个参数，保存的数据类型，值为"text"或者"URL"。setData()方法保存数据，这个方法接受两个参数，保存的数据类型和要保存的字符串。

在拖动文本框中的文本时，浏览器会调用 setData()方法，将拖动的文本以"text"格式保存在 dataTransfer 对象中。在拖放图片或者链接时，也会调用 setData()方法将链接以"URL"格式保存在 dataTransfer 对象中。

dropEffect 和effectAllowed

dropEffect 和effectAllowed 是dataTransfer 对象的两个属性。

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

• none：不能把元素放在这里。这是除文本框外所有元素的默认值。
• move：应该把拖动的元素移动到放置目标。
• copy：应该把拖动的元素复制到放置目标。
• link：表示放置目标会打开拖动的元素（只有拥有 URL 的元素有效）。

这个属性只会使浏览器的光标显示为不同的符号，不会自动移动、复制和打开，这些都需要另外实现。这个属性必须在 dropenter 事件中设置。

effectAllowed 属性表示允许拖动元素的那种 dropEffect。它的可能值如下。

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

必须在 dragstart 事件中设置 effectAllowed 属性。

可拖动

默认情况下图像、链接和文本是可以拖动的，其他的元素可以通过 draggable 属性设置为可拖动。

<div darggable="true">...</div>

其他成员

dataTransfer 对象还包含下列方法和属性。

• addElement(element)：为拖动操作添加一个元素。添加这个元素只影响数据（作为拖动源而相应回调的对象），不会影响拖动操作时页面元素的外观。目前仅有 Firefox 实现了这个方法。
• clearData(format)：清除以特定格式保存的数据。
• setDragImage（element, x, y）：指定一幅图像，当拖动发生时显示在光标下。x、y 指的是光标在图像中的 x、y 坐标。
• types：当前保存的数据类型。