本章內(nèi)容

• 使用跨文檔消息傳遞
• 拖放 API
• 音頻與視頻

16.1 跨文檔信息傳遞

有時(shí)候簡(jiǎn)稱(chēng)為 XDM，指的是來(lái)自不同域的頁(yè)面間傳遞消息。例如，www.wrox.com域中的頁(yè)面與位于一個(gè)內(nèi)嵌框架中的p2p.wrox.com域中的頁(yè)面通信。
XDM 的核心是postMessage()方法。該方法接收兩個(gè)參數(shù)：一條消息和一個(gè)表示消息接收方來(lái)自哪個(gè)域的字符串。第二個(gè)參數(shù)對(duì)保障安全通信非常重要，可以防止瀏覽器把消息發(fā)送到不安全的地方。

//注意：所有支持 XDM 的瀏覽器也支持`iframe`的`contentWindow`屬性
var iframeWindow = document.getElementById('myframe').contentWindow;
iframeWindow.postMessage("A secret", "http://www.wrox.com");

接收到 XDM 消息時(shí)，會(huì)觸發(fā)window對(duì)象的message事件。這個(gè)事件是以異步形式觸發(fā)的，因此從發(fā)送消息到接收消息可能要經(jīng)過(guò)一段時(shí)間的延遲。

16.2 原生拖放

說(shuō)到拖放，最有意思的恐怕就是能夠在框架間、窗口間，甚至在應(yīng)用間拖放網(wǎng)頁(yè)元素了。瀏覽器對(duì)拖放的支持位實(shí)現(xiàn)這些功能提供了便利。

16.2.1 拖放事件

拖動(dòng)某元素時(shí)，將依次觸發(fā)下列事件：

1. dragstart
2. drag
3. dragend

拖動(dòng)開(kāi)始時(shí)，可以通過(guò)ondragstart事件處理程序來(lái)運(yùn)行 JavaScript 代碼。
當(dāng)某個(gè)元素被拖動(dòng)到一個(gè)有效的放置目標(biāo)上時(shí)，下列事件會(huì)依次發(fā)生：

1. dragenter
2. dragover
3. dragleave或drop

16.2.2 自定義放置目標(biāo)

可以把任何元素變成有效的放置目標(biāo)，方法是重寫(xiě)dragenter和dragover事件的默認(rèn)行為。例如：

var droptarget = document.getElementById('droptarget');
EventUtil.addHandler(droptarget, "dragover", function(event) {
  EventUtil.preventDefault(event);
});
//dragenter 同

16.2.3 dataTransfer 對(duì)象

它是事件對(duì)象的一個(gè)屬性，用于從被拖動(dòng)元素向放置目標(biāo)傳遞字符串格式的數(shù)據(jù)，只能在拖放事件的事件處理程序中訪(fǎng)問(wèn)dataTransfer對(duì)象。

16.2.4 dropEffect 與 effectAllowed

這是dataTransfer 對(duì)象的兩個(gè)屬性，用來(lái)確定被拖動(dòng)的元素以及作為放置目標(biāo)的元素能接收什么操作。

16.2.5 可拖動(dòng)

默認(rèn)情況下，圖像、鏈接和文本是可以拖動(dòng)的。HTML5 規(guī)定了一個(gè)draggable屬性，表示元素是否可以拖動(dòng)。

16.2.6 其他成員

HTML5 規(guī)范規(guī)定dataTransfer對(duì)象還應(yīng)該包含的方法和屬性。如addElement(element)。

16.3 媒體元素

HTML5 新增了兩個(gè)與媒體相關(guān)的標(biāo)簽，即<audio>和<video>。

16.3.1 屬性

很多屬性可以直接在<audio>和<video>元素中設(shè)置。

屬性

16.3.2 事件

這兩個(gè)媒體元素還可以觸發(fā)很多事件。

事件

16.3.3 自定義媒體播放器

使用play()和pause()方法，可以手工控制媒體文件的播放。組合使用屬性、事件和這兩個(gè)方法，很容易創(chuàng)建一個(gè)自定義的媒體播放器。

自定義

16.3.4 檢測(cè)編解碼器的支持情況

都有一個(gè)canPlayType()方法，該方法接收一種格式／編解碼器字符串，返回“probably”、“maybe”或""（空字符串）。

if (audio.canPlayType("audio/mpeg")) {
  //進(jìn)一步處理
}

在同時(shí)傳入 MIME 類(lèi)型和編解碼器的情況下，可能性就會(huì)增加。

16.3.5 Audio 類(lèi)型

<audio>元素還有一個(gè)原生的構(gòu)造函數(shù)Audio，可以在任何時(shí)候播放音頻。

var audio = new Audio('sound.mp3');
EventUtil.addHandler(audio,"canplaythrough", function (event) {
  audio.play();
});

創(chuàng)建新的實(shí)例后即可開(kāi)始下載指定的文件。下載完成后，調(diào)用play()就可以播放音頻。

16.4 歷史狀態(tài)管理

HTML5 通過(guò)更新history對(duì)象為管理歷史狀態(tài)提供了方便。
通過(guò)haschange事件，可以知道 URL 的參數(shù)什么時(shí)候發(fā)生了變化，即什么時(shí)候該有所反應(yīng)。而通過(guò)狀態(tài)管理 API，能夠在不加載新頁(yè)面的情況下改變?yōu)g覽器的 URL。需要使用history.pushState()方法，該方法接收三個(gè)參數(shù)：狀態(tài)對(duì)象、新?tīng)顟B(tài)的標(biāo)題和可選的相對(duì) URL。如：

history.pushState({name:"Nicholas"}, "nicholas", "nicholas.html");

執(zhí)行該方法后，新的狀態(tài)信息就會(huì)被加入歷史狀態(tài)棧，而瀏覽器地址欄也會(huì)變成新的相對(duì) URL。但是，瀏覽器并不會(huì)真的向服務(wù)器發(fā)送請(qǐng)求。
按下“后退”按鈕，會(huì)觸發(fā)window對(duì)象的popstate事件。該事件的事件的對(duì)象有一個(gè)state屬性，這屬性就包含著當(dāng)初以第一個(gè)參數(shù)傳遞給pushState()的狀態(tài)對(duì)象。
要更新當(dāng)前狀態(tài)，可以調(diào)用replaceState()，傳入的參數(shù)與pushState()的前兩個(gè)參數(shù)相同。該方法只會(huì)重寫(xiě)當(dāng)前狀態(tài)。

請(qǐng)確保使用pushState() 創(chuàng)造的每一個(gè)“假”URL，在 Web 服務(wù)器上都有一個(gè)真的、實(shí)際存在的 URL 與之對(duì)應(yīng)。否則，刷新后會(huì)導(dǎo)致 404 錯(cuò)誤。

16.5 小結(jié)

HTML5 不僅定義了新的標(biāo)記規(guī)則，還定義了一些 JavaScript API。

• 跨文檔信息傳遞 API
• 原生拖放功能
• 新的媒體元素
• 歷史狀態(tài)管理