目录
跨文档消息传递
跨文档消息传送（cross-document messaging），有时候简称为 XDM，指的是在来自不同域的页面间传递消息。
XDM 的核心是 postMessage()方法。接收两个参数：一条消息和一个表示消息接收方来自哪个域的字符串。第二
个参数对保障安全通信非常重要，可以防止浏览器把消息发送到不安全的地方。
//注意：所有支持 XDM 的浏览器也支持 iframe 的 contentWindow 属性
var iframeWindow = document.getElementById("myframe").contentWindow;
iframeWindow.postMessage("A secret", "http://www.wrox.com");接收到 XDM 消息时，会触发 window 对象的 message 事件。这个事件是以异步形式触发的，因此从发送消息到接收消息（触发接收窗口的 message 事件）可能要经过一段时间的延迟。
EventUtil.addHandler(window, "message", function(event){
//确保发送消息的域是已知的域
if (event.origin == "http://www.wrox.com"){
//处理接收到的数据
processMessage(event.data);
//可选：向来源窗口发送回执
event.source.postMessage("Received!", "http://p2p.wrox.com");
}
});原生拖放
拖放事件
拖动某元素时，将依次触发下列事件：
(1) dragstart
(2) drag
(3) dragend
当某个元素被拖动到一个有效的放置目标上时，下列事件会依次发生：
(1) dragenter
(2) dragover
(3) dragleave 或 drop
自定义放置目标
//假设有一个 ID 为"droptarget"的<div>元素，可以用如下代码将它变成一个放置目标
var droptarget = document.getElementById("droptarget");
EventUtil.addHandler(droptarget, "dragover", function(event){
EventUtil.preventDefault(event);
});
EventUtil.addHandler(droptarget, "dragenter", function(event){
EventUtil.preventDefault(event);
});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");
//跨浏览器
var dataTransfer = event.dataTransfer;
//读取 URL
var url = dataTransfer.getData("url") ||dataTransfer.getData("text/uri-list");
//读取文本
var text = dataTransfer.getData("Text");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 属性，表示元素是否可以拖动。
<!-- 让这个图像不可以拖动 -->
<img src="smile.gif" draggable="false" alt="Smiley face">
<!-- 让这个元素可以拖动 -->
<div draggable="true">...</div>其他成员
HTML5 规范规定 dataTransfer 对象还应该包含下列方法和属性。
addElement(element)：为拖动操作添加一个元素。添加这个元素只影响数据（即增加作为拖动源而响应回调的对象），不会影响拖动操作时页面元素的外观。
clearData(format)：清除以特定格式保存的数据。
setDragImage(element, x, y)：指定一幅图像，当拖动发生时，显示在光标下方。这个方法接收的三个参数分别是要显示的 HTML 元素和光标在图像中的 x、 y 坐标。其中， HTML 元素可以是一幅图像，也可以是其他元素。是图像则显示图像，是其他元素则显示渲染后的元素。
types：当前保存的数据类型。这是一个类似数组的集合，以"text"这样的字符串形式保存着数据类型。
媒体元素
<!-- 嵌入视频 -->
<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>属性
事件
自定义媒体播放器
<div class="mediaplayer">
<div class="video">
<video id="player" src="movie.mov" poster="mymovie.jpg"
width="300" height="200">
Video player not available.
</video>
</div>
<div class="controls">
<input type="button" value="Play" id="video-btn">
<span id="curtime">0</span>/<span id="duration">0</span>
</div>
</div>//取得元素的引用
var player = document.getElementById("player"),
btn = document.getElementById("video-btn"),
curtime = document.getElementById("curtime"),
duration = document.getElementById("duration");
//更新播放时间
duration.innerHTML = player.duration;
//为按钮添加事件处理程序
EventUtil.addHandler(btn, "click", function(event){
if (player.paused){
player.play();
btn.value = "Pause";
} else {
player.pause();
btn.value = "Play";
}
});
//定时更新当前时间
setInterval(function(){
curtime.innerHTML = player.currentTime;
}, 250);检测编解码器的支持情况
var audio = document.getElementById("audio-player");
//很可能"maybe"
if (audio.canPlayType("audio/mpeg")){
//进一步处理
}
//可能是"probably"
if (audio.canPlayType("audio/ogg; codecs=\"vorbis\"")){
//进一步处理
}Audio类型
var audio = new Audio("sound.mp3");
EventUtil.addHandler(audio, "canplaythrough", function(event){
audio.play();
});历史状态管理
通过hashchange事件，可以知道 URL 的参数什么时候发生了变化，即什么时候该有所反应。而通过状态管理API，能够在不加载新页面的情况下改变浏览器的URL。为此，需要使用history.pushState()方法，该方法可以接收三个参数：状态对象、新状态的标题和可选的相对 URL。
history.pushState({name:"Nicholas"}, "Nicholas' page", "nicholas.html");pushState()会创建新的历史状态，会发现“后退”按钮也能使用了。按下“后退”按钮，会触发 window 对象的 popstate 事件。popstate 事件的事件对象有一个 state 属性，这个属性就包含着当初以第一个参数传递给 pushState()的状态对象。
EventUtil.addHandler(window, "popstate", function(event){
var state = event.state;
if (state){ //第一个页面加载时 state 为空
processState(state);
}
});要更新当前状态，可以调用 replaceState()，传入的参数与 pushState()的前两个参数相同。调用这个方法不会在历史状态栈中创建新状态，只会重写当前状态。
history.replaceState({name:"Greg"}, "Greg's page");