第 16 、HTML5 脚本编程

目录

跨文档信息传递

---

跨文档消息传送（cross-document messaging），有时候简称为 XDM，指的是在来自不同域的页面间 传递消息。
XDM的核心是 postMessage()方法。在 HTML5规范中，除了 XDM部分之外的其他部分也会提到这个方法名，但都是为了同一个目的：向另一个地方传递数据。
postMessage()方法接收两个参数：一条消息和一个表示消息接收方来自哪个域的字符串。第二 个参数对保障安全通信非常重要，可以防止浏览器把消息发送到不安全的地方。

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

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

原生拖放

---

• 拖放事件
  拖动某元素时，将依次触发 下列事件：
  1、dragstart
  2、drag
  3、dragend
  当某个元素被拖动到一个有效的放置目标上时，下列事件会依次发生：
  (1) dragenter
  (2) dragover
  (3) dragleave 或 drop

• 自定义放置目标
  把任何元素变成有效的放置 目标，方法是重写 dragenter 和 dragover 事件的默认行为。preventDefault(event)

• dataTransfer 对象
  为了在拖放操作时实现数据交换，IE 5 引入了 dataTransfer 对象。
  dataTransfer 对象有两个主要方法：getData()和 setData()。setData()方法的第一个参数，也是 getData()方法唯一的一个参数，是 一个字符串，表示保存的数据类型。

• dropEffect 与 effectAllowed
  利用 dataTransfer 对象，可不光是能够传输数据，还能通过它来确定被拖动的元素以及作为放 置目标的元素能够接收什么操作。为此，需要访问 dataTransfer 对象的两个属性：dropEffect 和 effectAllowed。
  通过 dropEffect 属性可以知道被拖动的元素能够执行哪种放置行为。这个属性有下列 4 个可能的值。

  "none"：不能把拖动的元素放在这里。这是除文本框之外所有元素的默认值。 
  "move"：应该把拖动的元素移动到放置目标。 
  "copy"：应该把拖动的元素复制到放置目标。 
  "link"：表示放置目标会打开拖动的元素（但拖动的元素必须是一个链接，有 URL）。 

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

  "uninitialized"：没有给被拖动的元素设置任何放置行为。 
  "none"：被拖动的元素不能有任何行为。 
  "copy"：只允许值为"copy"的 dropEffect。 
  "link"：只允许值为"link"的 dropEffect。 
  "move"：只允许值为"move"的 dropEffect。 
  "copyLink"：允许值为"copy"和"link"的 dropEffect。 
  "copyMove"：允许值为"copy"和"move"的 dropEffect。 
  "linkMove"：允许值为"link"和"move"的 dropEffect。  "all"：允许任意 dropEffect。

• 可拖动
  HTML5为所有 HTML元素规定了一个 draggable 属性，表 示元素是否可以拖动。图像和链接的 draggable 属性自动被设置成了 true，而其他元素这个属性 的默认值都是 false。要想让其他元素可拖动，或者让图像或链接不能拖动，都可以设置这个属性。

媒体元素

---

两个标签是 <audio> 和 <video>。

<!-- 嵌入视频 --> 
<video src="conference.mpg" id="myVideo">Video player not available.</video> 

<!-- 嵌入音频 --> 
<audio src="song.mp3" id="myAudio">Audio player not available.</audio> 

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

<!-- 嵌入视频 --> 
<video id="myVideo">   
    <source src="conference.webm" type="video/webm; codecs='vp8, vorbis'">   
    <source src="conference.ogv" type="video/ogg; codecs='theora, vorbis'">   
    <source src="conference.mpg">   Video player not available. 
</video> 

<!-- 嵌入音频 --> 
<audio id="myAudio">   
    <source src="song.ogg" type="audio/ogg">   
    <source src="song.mp3" type="audio/mpeg">
   Audio player not available. 
</audio> 

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

历史状态管理

---

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

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

因为 pushState()会创建新的历史状态，所以你会发现“后退”按钮也能使用了。按下“后退” 按钮，会触发 window 对象的 popstate 事件。popstate 事件的事件对象有一个 state 属性，这个属性就包含着当初以第一个参数传递给 pushState()的状态对象。
得到这个状态对象后，必须把页面重置为状态对象中的数据表示的状态（因为浏览器不会自动为你做这些）。记住，浏览器加载的第一个页面没有状态，因此单击“后退”按钮返回浏览器加载的第一个 页面时，event.state 值为 null。 要更新当前状态，可以调用 replaceState()，传入的参数与 pushState()的前两个参数相同。 调用这个方法不会在历史状态栈中创建新状态，只会重写当前状态。

在使用HTML5的状态管理机制时，请确保使用 pushState()创造的每一个“假” URL，在 Web服务器上都有一个真的、实际存在的 URL与之对应。否则，单击“刷 新”按钮会导致 404错误。

小结

HTML5除了定义了新的标记规则，还定义了一些 JavaScript API。这些 API是为了让开发人员创建 出更好的、能够与桌面应用媲美的用户界面而设计的。本章讨论了如下 API。

1. 跨文档消息传递 API 能够让我们在不降低同源策略安全性的前提下，在来自不同域的文档间传 递消息。
2. 原生拖放功能让我们可以方便地指定某个元素可拖动，并在操作系统要放置时做出响应。还可 以创建自定义的可拖动元素及放置目标。
3. 新的媒体元素和拥有自己的与音频和视频交互的 API。并非所有浏览器支持所 有的媒体格式，因此应该使用canPlayType()检查浏览器是否支持特定的格式。
4. 历史状态管理让我们不必卸载当前页面即可修改浏览器的历史状态栈。有了这种机制，用户就可以通过“后退”和“前进”按钮在页面状态间切换，而这些状态完全由 JavaScript进行控制.