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 拖放事件
拖动某元素时，将依次触发下列事件：
dragstartdragdragend
拖动开始时，可以通过ondragstart事件处理程序来运行 JavaScript 代码。
当某个元素被拖动到一个有效的放置目标上时，下列事件会依次发生：
dragenterdragover-
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
- 原生拖放功能
- 新的媒体元素
- 历史状态管理
