HTML5脚本编程
（一）跨文档消息传递
postMessage():向包含在当前页面的<iframe>元素，或由当前页面弹出的窗口传递数据。
接收两个参数：一条消息和一个表示消息接收方来自哪个域的字符串。
//所有支持XDM的浏览器也支持iframe的contentWindow属性
var iframeWindow = document.getElementById("myframe").contentWindow;
iframeWindow.postMessage("A secret","http://www.worx.com");
接收到XDM消息后会触发window对象的message事件，传递给onmessage处理程序的事件对象包含data（postMessage的第一个参数）、origin（发生消息的文档所在的域）、source（发送消息的文档的window对象的代理）。
收到消息后验证发送窗口的来源是非常重要的。
IE8+、Firefox3.5+、Safari 4+、Opera和Chrome。
（二）原生拖放
1.拖放事件
拖动某元素时，依次触发的事件：dragstart、drag、dragend。
当某个元素被拖到一个有效的放置目标，依次触发：dragenter、dragover、dragleave或drop。
只要元素被拖到放置目标就会触发dragenter事件，紧随其后的是dragover事件，在被拖动的元素还在放置目标的范围内移动时，就会持续触发该事件。如果元素被拖出拖放目标会触发dragleave事件。
2.自定义放置目标
重写dragenter和dragover事件的默认行为，将元素变成有效的放置目标。
if (event.type == "dropenter" || event.type == "dragover" || event.type=="drop"){
EventUtil.preventDefault(event);
}
}
为了让Firefox 3.5+支持正常的拖放还要取消drop事件的默认行为，阻止它打开URL
if (event.type=="drop"){
EventUtil.preventDefault(event);
}
3.dataTransfer对象
datatransfer 方法：getData()和setData()。
getData()参数：保存数据的类型，取值为"text"或"URL"。
在拖动文本框的文本会调用setData()方法，将拖动的文本以text格式保存在dataTransfer对象。在元素被拖放到放置目标时可以通过getData()读取数据。
IE10及之前版本不支持扩展的MIME类型名，Firefox5之前把Text映射为text/plain。
4.dropEffect与effectAllowed
dropEffect属性：知道被拖放的元素能支持哪种拖放行为。none、move、copy和link。
efectAllowed属性：允许拖放元素的哪种dropEffect。
必须在ondragstart事件处理程序中设置effectAllowed属性。
5.可拖动
draggable属性：元素释放可以拖动。图像和链接被自动设置为true，其他元素都是false。
IE 10+、Firefox 4+、Safari 5+和Chrome。
6.其他成员
（三）媒体元素
<audio>和<video>
可以指定多个不同的媒体来源
<!-- 嵌入视频 -->
<video id="myVideo">
<source src="*.webm" type="video/webm"; codecs=‘vp8, vorbis‘">
<source src="*.ogv" type="video/ogg"; codecs=‘theora,vorbis" ">
<source src="conference.mpg">
Video player not avaliable.
</video>
<!-- 嵌入音频 -->
<audio id="myAudio">
<source src="*.ogg" type="audio/ogg">
<source src="*.mp3" type="audio/mpeg">
Audio player not avaliable.
</audio>
IE9+、Firefox 3.5+、Safari 4+、Opera 10.5+、Chrome。
1.属性
2.事件
3.自定义媒体播放器
使用play()和pause()方法。
//为按钮添加事件处理程序
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);
4.检测编解码器的支持情况
canPlayType()：接收一种格式/编解码器字符串，返回"probably"、"maybe"或""。如果传入MIME类型返回值可能是"maybe"或空字符串。
5.Audio类型
<audio>有一个构造函数Audio，可以在任何时候播放音频。
（四）历史状态管理
hashchage事件可以知道URL的参数什么时候发生了变化。
history.pushState() 接收三个参数：状态对象、新状态的标题和可选的相对URL。
执行pushState()后，新的状态信息会被加入历史状态栈，浏览器地址变成新的相对URL。
要更新当前状态，可以调用replaceState()，传入与pushState()的前两个参数。
Firefox 4+、Safari 5+、Opera 11.5+和Chrome。