HTML5 脚本编程——JavaScript高级程序设计笔记（13）

第16章 HTML5脚本编程

---

1. 跨文档消息传送（cross-document messaging），有时候简称为XDM，指的是在来自不同域的页面间
   传递消息。例如，www.wrox.com域中的页面与位于一个内嵌框架中的p2p.wrox.com 域中的页面通信。
   在XDM 机制出现之前，要稳妥地实现这种通信需要花很多工夫。XDM 把这种机制规范化，让我们能
   既稳妥又简单地实现跨文档通信。

2. postMessage()方法接收两个参数：一条消息和一个表示消息接收方来自哪个域的字符串。第二
   个参数对保障安全通信非常重要，可以防止浏览器把消息发送到不安全的地方。来看下面的例子。
   //注意：所有支持XDM 的浏览器也支持iframe 的contentWindow 属性
var iframeWindow = document.getElementById("myframe").contentWindow;
iframeWindow.postMessage("A secret", "http://www.wrox.com");

3. 接收到XDM消息时，会触发window 对象的message 事件。这个事件是以异步形式触发的，因此
   从发送消息到接收消息（触发接收窗口的message 事件）可能要经过一段时间的延迟。触发message
   事件后，传递给onmessage 处理程序的事件对象包含以下三方面的重要信息。
    data：作为postMessage()第一个参数传入的字符串数据。
    origin：发送消息的文档所在的域，例如”http://www.wrox.com“。
    source：发送消息的文档的window 对象的代理。这个代理对象主要用于在发送上一条消息的
   窗口中调用postMessage()方法。如果发送消息的窗口来自同一个域，那这个对象就是
   window。
   在onmessage 处理程序中检测消息来源可以确保传入的消息来自已知的页面。基本的检测模式如下。
   EventUtil.addHandler(window, "message", function(event){
//确保发送消息的域是已知的域
if (event.origin == "http://www.wrox.com"){
//处理接收到的数据
processMessage(event.data);
//可选：向来源窗口发送回执
event.source.postMessage("Received!", "http://p2p.wrox.com");
}
});

4. 原生拖放

   • 拖动某元素时，将依次触发下列事件：
     (1) dragstart
     (2) drag
     (3) dragend
   • 当某个元素被拖动到一个有效的放置目标上时，下列事件会依次发生：
     (1) dragenter
     (2) dragover
     (3) dragleave 或drop
   • dataTransfer对象
     用于从被拖动元素向放置目标传递字符串格式的数据
     //设置和接收文本数据
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");

5. 媒体元素
   <!-- 嵌入视频 -->
<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>

6. 历史状态管理
   history.pushState({name:”Nicholas”}, “Nicholas’ page”, “nicholas.html”);
   执行pushState()方法后，新的状态信息就会被加入历史状态栈，而浏览器地址栏也会变成新的
   相对URL。但是，浏览器并不会真的向服务器发送请求，即使状态改变之后查询location.href 也会
   返回与地址栏中相同的地址。