HTML5 脚本编程

本章内容：使用跨文档消息传递、拖放API、音频与视频

HTML规范定义了很多新HTML 标记，为了匹配和这些标记的变化，HTML5规范也用显著篇幅定义了很多 JavaScript API。定义这些 API 的用意就是简化此前实现起来困难重重的任务，最终简化创建动态 Web 界面工作。

一、跨文档消息传递

跨稳定消息传递（cross-document messaging）简称 XDM。指的是在来自不同域的页面间传递消息。XDM把这种机制规范化，让我们能即稳妥又简单地实现跨文档通信。

XDM的核心是 postMessage() 方法。接受两个参数化：一条消息 和 一个表示消息接收方来自哪个域的字符串。第二个参数对保障安全完全通信非常重要，可以防止浏览器把消息发送到不安全的地方。

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

如果传递给 postMessage() 的第二个参数是“*”，则可以表示消息发送给来自任何域的文档，但我们不推荐这么做

接受 XDM 消息时，会触发window 对象的message事件。这个事件是以异步形式触发的，因此从发送消息到接收消息（触发接收窗口的 message 事件）可能要经过一段时间的延迟。触发 message 事件后，传递给 onmessage 处理程序的事件对象包含以下三方面的重要信息。

• data：作为 postMessage() 第一个参数传入的字符串数据。
• origin：发送消息的文档所在的域，例如：“http://www.wrox.com”
• source：发送消息的文档的 window 对象的代理。这个代理对象主要用于在发送上一条消息的窗口中调用 postMessage() 方法。如果发送消息的窗口来自同一个域，那这个对象就是 window。

接受到消息后验证发送窗口的来源是至关重要的，在 onmessage 处理程序中检测消息来源可以确保传入的消息来自已知的页面。
基本的检查模式如下：

window.onmessage = function(event) {
  event = event || window.event

  // 处理接收到的消息
  processMessage(event.data)

  // 可选：向来源窗口发送回执
  event.source.postMessage('Received', 'http://p2p.wrox.com')
}

event.source 大多情况下只是 window 对象的代理，并非实际的window 对象。不能通过这个代理对象访问 window 对象的其他任何信息。通过这个代理调用 postMessage() 就好，这个方法永远存在，永远可以调用。
在通过 内嵌框架 加载其它域内容的内容时，使用XDM 是非常方便的。在混搭（mashup）和社交网络应用中，这种传递消息的方法即为常用。

二、原生拖放

最早啊在网页中引入 JavaScript 拖放功能的是 IE4。当时，网页中只有两种对象可以拖放：图像和某些文本。HTML5以 IE 的实例为基础制定了拖放规范。

2.1、拖放事件

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

• dragstart
  • 按下鼠标键并开始移动鼠标时触发
• drag
  • 在元素被拖动期间会持续触发该事件。
• dragend
  • 当拖动停止（无论是吧元素放到了有效的放置目标，还是放到了无效的放置目标上）

---

上诉三个事件的目标都是被拖动元素。默认情况下，浏览器不会在拖动期间改变被拖动元素的外观，但你可以自己修改。不过，大多浏览器都会为正被拖动的元素创建一个半透明的副本，这个副本始终跟随着光标移动。

当摸一个元素被拖动到一个有效的放置目标上时，下列事件会依次发生：

• dragenter
  • 只要有元素拖动到放置目标上，就会触发
• dragover
  • dragenter 之后触发，在被拖动的元素还在放置目标的范围内移动时，触发该事件
• dragleave 或 drop
  • 如果元素被拖出了放置目标，触发 dragleave 事件
  • 如果元素放到了放置目标中，则触发 drop 事件

2.2、自定义放置目标

在拖动元素经过某些无效放置目标时，可以看到一种特殊的光标（圆环中有一条反斜线）表示不能放置。可以把任何元素变成有效的放置目标，方法是重写 dragenter 和 dragover 事件的默认行为。
例如：假设有一个ID 为 droptarget 的

元素，可以用如下代码将它变成一个放置目标。

var droptarget = document.getElementById('droptarget')

droptarget.ondragover = function(event) {
  event.preventDefault()

}

droptarget.ondragenter = function(event) {
  event.preventDefault()
}

以上代码执行后，你就会发现当拖动着元素移动到放置目标上时，光标变成了允许放置的符号。当然，释放鼠标也会触发 drop 事件。

---

在 Firefox 3.5+中，放置事件的默认行为是打开被放置目标上的URL。为了让 Firefox 支持正常的拖放，还要取消 drop 事件的默认行为，阻止它打开 URL。

droptarget.ondrop = function(event) {
  event.preventDefault()
}

2.3、dataTransfer 对象

为了在拖放操作时实现数据交换，IE5 引入了 dataTransfer 对象。它是事件处理对象的属性，只能在拖放事件处理程序中访问 dataTransfer 对象。可以使用这个对象的属性和方法来完善拖放功能。
dataTransfer 对象主要有两个方法：

• getDate()：取得 setData() 保存的值。
• setData()

这两个参数都接受一个参数：是一个字符串，表示保存的数据类型，取值为 "text" 或 "URL"，如下表示：

// 设置和接收文本数据
event.dataTransfer.setData("text", "some text")
var text = event.DataTransfer.getData("text")

// 设置和接收 URL
event.dataTransfer.setData("URL", "http://www.wrox.com")
var url = event.dataTransfer.getData("URL")

IE 只定义了 "text" 和 "URL" 两种有效的数据类型，而HTML5则对此加以扩展，允许指定各种 MIME类型。考虑到向后兼容，HTML5 也支持 "text" 和"URL"，但是这两种类型会被映射为 "text/plain" 和 "text/rui-list"。dataTransfer 对象可以为每种 MIME 类型都保存一个值。保存在 dataTransfer 对象中的数据只能在 drop 事件处理程序中读取。

在拖动文本框中的文本时，浏览器会调用 setData() 方法，将拖动的文本以“text” 格式保存在 dataTransfer 对象中。作为开发人员，你也可以正在 dragstart 事件处理程序中调用 setData()，手工保存自己要传输的数据，以便将来使用。
Firefox 在其第5个 版本之前不能正确地将“url” 和 “text”映射为 “text/uri-list”和 “text/plain”。但是却能宝 “Text” 映射为“text/plain”。为了更好地在跨浏览器的情况下从 dataTransfer 对象取得数据，最好在取得 URL 数据时检测两个值，而在取得文本数据时使用“Text”

var dataTransfer = event.datatTransfer

// 读取 URL
var url = dataTransfer.getData('url') || dataTransfer.getData('text/uri-list')

// 读取文本
var text = dataTransfer.getData('Text')

2.4、dropEffect 与 effectAllowed

利用 dataTransfer 对象，不光是能够传输数据，还能通过它来确定被拖动的元素以及作为放置目标的元素 能接接收什么操作。为此，需要访问 dataTransfer 对象的两个属性：dropEffect 和 effectAllowed。

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

• none：不能把拖动的元素放在这里。这是除文本框之外所有元素的默认值。
• move：应该把拖动的元素移动到放置目标。
• copy：应该把拖动的元素复制到放置目标。
• link：表示放置目标会打开拖动的元素（但拖动的元素必须是一个链接，有URL）
  在把元素拖动到放置目标上时，以上每一个值都会导致光标显示为不同的符号，要使用 dropEffect属性，必须在 ondragenter 事件处理程序中针对放置目标来设置它

dropEffect 属性只有搭配 effectAllowed 属性才有用。effectAllowed 属性表示允许被拖动元素的哪种 dropEffect，effectAllowed 属性可能的值如下。

• uninitialize：没有给被拖动的元素设置 任何放置行为。
• none：被拖动大元素不能有任何行为
• copy：只允许值为 copy 的dropEffect
• link：只允许值为 link 的 dropEffect
• move：只允许值为 move 的 dropEffect
• copyLink：允许值为 copy 和 link 的 dropEffect
• copyMove：允许值为 copy 和 move 的 dropEffect
• linkMove：允许值为 link 和 move 的 dropEffect
• all：允许任意 dropEffect
  必须在 ondragstart 事件处理程序中设置 effectAllowed 属性。

2.5、可拖动

让其他元素(默认无法拖动的元素)可拖动也是可能的。 HTML5 为所有 HTML 元素规定了一个 draggable 属性，表示元素是否可以拖动。图像和连接的 draggable 属性自动被设置成了 true，而其他元素这个属性的默认值都是 false。

...

另外，为了让 Firefox 支持可拖动属性，还必须添加一个 ondragstart 事件处理程序，并在 dataTransfer 对象中保存一些信息。

2.6、其他成员

HTML5 规范规定 dataTransfer 对象还应该包含下列方法 和 属性。

• addElement(element)：为拖动操作添加一个元素。添加这个元素只能影响数据（即增加座位拖动源而响应回调的对象），不会影响拖动操作时页面元素的外观。
• clearData(format)：清除以特定格式保存的数据。实现这个方法的浏览器有 IE、Firefox3.5+、Chrome 和 Safari4+。
• setDragImage(element, x ,y)：指定一副图像，当拖动发生时，显示在光标下方。这个方法接受的三个参数分别是要显示的HTML 元素和光标在图像中的x，y坐标。其中，HTML元素可以是一副图像，也可以是其他元素。是图像则只显示图像，是其他元素则显示渲染后的元素。实现这个方法的浏览器有 Firefox3.5+、Safari4+、Chrome
• types：当前保存的数据类型。这是一个类似数组的集合，以“text”这个的字符串形式保存着数据类型。实现这个属性的浏览器有 IE10+、Firefox3.5+、Chrome

三、媒体元素

随着音频和视频在 Web 上的迅速流行，HTML5 新增了两个与媒体相关的标签，让开发人员不必依赖任何插件就能在网页中嵌入浏览器的音频和视频内容。这两个标签是

还可以设置 width 和 height 属性以指定视频播放器的大小，而为 poster 属性指定图像的 URI 可以在加载视频内容期间显示一副图像。另外，如果标签中有 controls 属性，则意味着浏览器应该显示 UI 空间，位于开始和借宿标签之间的任何内容都将作为后备内容，在浏览器不支持这两个媒体元素的情况下显示。

因为并非所有浏览器都支持所以媒体格式，所以可以指定多个不同的媒体来源。为此，不用在标签中指定src属性，而是要像下面这样使用一或多个 元素。

3.1、属性

属性	数据类形	说明
autoplay	布尔值	取得或设置 autoplay标志
buffered	时间范围	表示已下载的缓冲的事件范围的对象
bufferedBytes	字节范围	表示已下载的缓冲的字节范围的对象
bufferingRate	整数	下载过程中每秒钟平均接收到的位数
bufferingThrottled	布尔值	表示浏览器是否对缓冲进行了节流
controls	布尔值	取得或设置 controls 属性，用于显示或隐藏浏览器内置的控件
currentLoop	整数	媒体文件已经循环的次数
currentSrc	字符串	当前播放的媒体文件的URL
currentTime	浮点数	已经播放的秒数
defaultPlaybackRate	浮点数	取得或设置默认的播放速度。默认值为 1.0秒
duration	浮点数	媒体的总播放事件（秒数）
ended	布尔值	表示媒体文件是否播放完成
loop	布尔值	取得或设置媒体文件在播放完成后是否再从头开始播放
muted	布尔值	取得或设置媒体文件是否静音
networkState	整数	表示当前媒体的网络连结状态：0表示空，1表示正在加载，2表示正在加载元数据，3表示已经加载了第一帧，4表示加载完成。
paused	布尔值	表示播放器是否暂停
playbackRate	浮点数	取得或设置当前的播放速度。用户可以改变这个值，让媒体播放速度变快或变慢，这与 defaultPlaybackRate 只能由开发人员修改的 defaultPlaybackRate 不同
played	时间范围	到目前为止已经播放的事件范围
readyState	整数	表示媒体是否已经就绪（可以播放了）。0表示数据不可用，1表示考科一显示当前怕，2表示可以开始播放，3表示媒体可以从头到尾播放
seekable	时间范围	到目前为止已经播放的时间范围
seeking	布尔值	表示播放器是否真正移动到媒体文件中的新位置
src	字符串	媒体文件的来源。任何时候都可以重写这个属性
start	浮点数	取得或设置媒体文件中开始播放的位置，以秒表示
start	浮点数	取得或设置媒体文件中开始播放的位置，以秒表示
totalBytes	整数	当前资源所需的总字节数
videoHeight	整数	返回视频（不一定是元素）的高度。只适用于
videoWidth	整数	返回视频（不一定是元素）的宽度。只适用于
volume	浮点数	取得或设置当前音量，值为 0.0 到1.0

其中很多属性也可以直接在

3.2、事件

处理大量属性之外，这两个媒体云阿苏还可以触发很多事件。这些事件监控着不同的属性的变化，这些变化可能是媒体播放的结果，也可能是用户操作播发器的结果。下表列出了媒体元素相关的事件。

事件	触发时机
abort	下载中断
canplay	可以播放是；readyState值为2
canplaythrough	播放可继续，而且应该不会中断；readyState值为3
canshowcurrentframe	当前帧已经下载完成；readyState值为1
dataunavailable	当前没有数据而不能播放；readyState 值为 0
durationchange	duration 属性的值改变
emptied	网络连接关闭
empty	发送错误阻止了媒体下载
ended	媒体已播放到末尾，播放停止
error	下载期间发生网络错误
load	所有媒体已加载完成。这个事件可能会被废弃，建议使用 canplaythrough
loadeddate	媒体的第一帧以加载完成
loadedmetadata	媒体的元数据已加载完成
loadstart	下载已开始
pause	播放已暂停
play	媒体已接收到指令开始播放
playing	媒体已实际开始播放
progress	正在下载
ratechange	播放媒体的速度改变
seeked	搜索结束
seeking	正移动到新位置
stakked	浏览器尝试下载，但未接收到数据
timeupdate	currentTime被以不合理或意外的方式更新
volumechange	volume 属性值或 muted属性值已改变
waiting	播放暂停，等待下载更多数据

这些事件之所以如此具体，就是为了让开发人员只使用少量 HTML 和 JavaScript（与创建 Flash 影片相比）即可编写出自定义的 音频/视频播放器。

3.3、自定义媒体播放器

使用

  

    

      
    
    

      
      0 / 0