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. dragleavedrop

16.2.2 自定义放置目标

可以把任何元素变成有效的放置目标,方法是重写dragenterdragover事件的默认行为。例如:

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
  • 原生拖放功能
  • 新的媒体元素
  • 历史状态管理

推荐阅读更多精彩内容