16 HTML5 脚本编程

本章内容

• 使用跨文档消息传递
• 拖放 API
• 音频与视频

16.1 跨文档信息传递

有时候简称为 XDM，指的是来自不同域的页面间传递消息。例如，www.wrox.com域中的页面与位于一个内嵌框架中的p2p.wrox.com域中的页面通信。
XDM 的核心是postMessage()方法。该方法接收两个参数：一条消息和一个表示消息接收方来自哪个域的字符串。第二个参数对保障安全通信非常重要，可以防止浏览器把消息发送到不安全的地方。

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

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

16.2 原生拖放

说到拖放，最有意思的恐怕就是能够在框架间、窗口间，甚至在应用间拖放网页元素了。浏览器对拖放的支持位实现这些功能提供了便利。

16.2.1 拖放事件

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

1. dragstart
2. drag
3. dragend

拖动开始时，可以通过ondragstart事件处理程序来运行 JavaScript 代码。
当某个元素被拖动到一个有效的放置目标上时，下列事件会依次发生：

1. dragenter
2. dragover
3. dragleave或drop

16.2.2 自定义放置目标

可以把任何元素变成有效的放置目标，方法是重写dragenter和dragover事件的默认行为。例如：

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

16.2.3 dataTransfer 对象

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

16.2.4 dropEffect 与 effectAllowed

这是dataTransfer 对象的两个属性，用来确定被拖动的元素以及作为放置目标的元素能接收什么操作。

16.2.5 可拖动

默认情况下，图像、链接和文本是可以拖动的。HTML5 规定了一个draggable属性，表示元素是否可以拖动。

16.2.6 其他成员

HTML5 规范规定dataTransfer对象还应该包含的方法和属性。如addElement(element)。

16.3 媒体元素

HTML5 新增了两个与媒体相关的标签，即<audio>和<video>。

16.3.1 属性

很多属性可以直接在<audio>和<video>元素中设置。

属性

16.3.2 事件

这两个媒体元素还可以触发很多事件。

事件

16.3.3 自定义媒体播放器

使用play()和pause()方法，可以手工控制媒体文件的播放。组合使用属性、事件和这两个方法，很容易创建一个自定义的媒体播放器。

自定义

16.3.4 检测编解码器的支持情况

都有一个canPlayType()方法，该方法接收一种格式／编解码器字符串，返回“probably”、“maybe”或""（空字符串）。

if (audio.canPlayType("audio/mpeg")) {
  //进一步处理
}

在同时传入 MIME 类型和编解码器的情况下，可能性就会增加。

16.3.5 Audio 类型

<audio>元素还有一个原生的构造函数Audio，可以在任何时候播放音频。

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

创建新的实例后即可开始下载指定的文件。下载完成后，调用play()就可以播放音频。

16.4 历史状态管理

HTML5 通过更新history对象为管理历史状态提供了方便。
通过haschange事件，可以知道 URL 的参数什么时候发生了变化，即什么时候该有所反应。而通过状态管理 API，能够在不加载新页面的情况下改变浏览器的 URL。需要使用history.pushState()方法，该方法接收三个参数：状态对象、新状态的标题和可选的相对 URL。如：

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

执行该方法后，新的状态信息就会被加入历史状态栈，而浏览器地址栏也会变成新的相对 URL。但是，浏览器并不会真的向服务器发送请求。
按下“后退”按钮，会触发window对象的popstate事件。该事件的事件的对象有一个state属性，这属性就包含着当初以第一个参数传递给pushState()的状态对象。
要更新当前状态，可以调用replaceState()，传入的参数与pushState()的前两个参数相同。该方法只会重写当前状态。

请确保使用pushState() 创造的每一个“假”URL，在 Web 服务器上都有一个真的、实际存在的 URL 与之对应。否则，刷新后会导致 404 错误。

16.5 小结

HTML5 不仅定义了新的标记规则，还定义了一些 JavaScript API。

• 跨文档信息传递 API
• 原生拖放功能
• 新的媒体元素
• 历史状态管理