本文对在JS中涉及到的HTML5脚本做了简单整理。最近比较忙，不是特别细致，以后补充。
1.跨文档消息传递
跨文档消息传送（cross-document messaging），有时候也简称为XDM。
指的是在来自不同域的页面间传递消息。
在XDM机制出现之前，更稳妥地实现这种通信需要花很多功夫。XDM把这种机制规范化，让我们能既稳妥有简单地实现跨文档通信。
核心：postMessage()方法。
目的：向另一个地方传递数据。
另一个地方：指的是包含在当前页面中的<iframe>元素，或者由当前页面弹出的窗口。
接收两个参数：一条消息和一个表示消息接收方来自哪个域的字符串。第二个参数对保障安全通信非常重要，可以防止浏览器把消息发送到不安全的地方。
主要语句
var iframeWindow = document.getElementById(“myframe”).contentWindow;
iframeWindow.postMessage(“A secret” , ”http://www.wrox.com”);
最后一行代码尝试向内嵌框架中发送一条消息，并指定框架中的文档必须来源于“http://www.wrox.com”域。
如果来源匹配，消息会传递到内嵌框架中；否则，postMessage()什么也不做。
这一限制可以避免窗口中的位置在你不知道的情况下发生改变。
如果传给postMessage()的第二个参数是“*”，则表示可以把消息发送给来自任何域的文档，但我们不推荐这样做。
接收到XDM消息时，会触发window对象的message事件。
这个事件是以异步形式触发的，因此从发送消息到接受消息（触发接受窗口的message事件）可能要经过一段时间的延迟。
触发message事件后，传递给onmessage处理程序的事件对象包含以下三方面的重要信息。
data:作为postMessage()第一个参数传入的字符串数据。
origin:发送消息的文档所在的域，例如“https://www.w3cmm.com”。
source：发送消息的文档的window对象的代理。这个代理对象主要用于在发送上一条消息的窗口中调用postMessage()方法。如果发送消息的窗口来自同一个域，那这个对象就是window。
接受到消息后验证发送窗口的来源是至关重要的。
就像给postMessage()方法指定第二个参数，以确保浏览器不会把消息发送给未知页面一样，在onmessage处理程序中检测消息来源可以确保传入的消息来自已知的页面。基本的检测模式如下例：msg.html是id为iframe内嵌框架中的页面。
2.原生拖放
2.1拖放事件
针对被拖放元素
dragstart
drag
dragend
针对放置目标的元素
dragenter
dragover
dragleave或drag
2.3 dataTransfer对象
两个主要方法：
getData(类型)
setData(类型，具体值)
2.4 dropEffect和effectAllowed
1.effectAllowed属性表示允许拖放元素的哪种dropEffect。
dropEffect 也是 dataTransfer的一种属性。
dropEffect属性可以知道被拖动的元素能够执行哪种放置行为（当拖到目的地时）。这个属性有下列4个可能的值。
“none”：不能把拖动的元素放在这里。这是除文本框之外所有元素的默认值。
“move”：应该把拖动的元素移动到放置目标。
“copy”：应该把拖动的元素复制到放置目标。
“link”：表示放置目标会打开拖动的元素（但拖动的元素必须是一个链接，有URL）。
2.dt.effectAllowed = 'all'：即说被拖动元素在放置到目的地时，可以上面的任意一种效果来处理。
- 必须在ondraggstart事件处理程序中设置effectAllowed属性。
2.5 可拖动
draggable属性：就是标签元素要设置draggable=true，否则不会有效果，例如：
<div title="拖拽我" draggable="true">列表1</div>
2.6 属性整理
- DataTransfer 对象：退拽对象用来传递的媒介，使用一般为Event.dataTransfer。
- draggable 属性：就是标签元素要设置draggable=true，否则不会有效果，例如：
<div title="拖拽我" draggable="true">列表1</div>- ondragstart 事件：当拖拽元素开始被拖拽的时候触发的事件，此事件作用在被拖曳元素上
- ondragenter 事件：当拖曳元素进入目标元素的时候触发的事件，此事件作用在目标元素上
- ondragover 事件：拖拽元素在目标元素上移动的时候触发的事件，此事件作用在目标元素上
- ondrop 事件：被拖拽的元素在目标元素上同时鼠标放开触发的事件，此事件作用在目标元素上
- ondragend 事件：当拖拽完成后触发的事件，此事件作用在被拖曳元素上
- Event.preventDefault() 方法：阻止默认的些事件方法等执行。在ondragover中一定要执行preventDefault()，否则ondrop事件不会被触发。另外，如果是从其他应用软件或是文件中拖东西进来，尤其是图片的时候，默认的动作是显示这个图片或是相关信息，并不是真的执行drop。此时需要用用document的ondragover事件把它直接干掉。
- Event.effectAllowed 属性：就是拖拽的效果。
在这里推荐大家阅读这篇博客，配合实例练习http://blog.csdn.net/baidu_25343343/article/details/53215193
3.媒体元素
video 视频
audio 音频
用法：
<audio id="player" src="trailer.ogg" poster="universal.gif" controls>不支持音频</audio>
<video id="player" src="trailer.ogg" poster="universal.jpg" width="300" height="200">不支持视频</video>
属性：
事件
自定义播放器
主要使用：play() 、pause()
DOM部分：
<div class="mediaplayer">
<div class="video">
<video id="player" src="opening.mp4" poster="opening.png" 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>
js部分：
var player = document.getElementById("player"),
btn = document.getElementById("video-btn"),
curtime = document.getElementById("curtime"),
duration = document.getElementById("duration");
btn.onclick = function() {
if (player.paused) {
player.play();
btn.value = "Pause";
duration.innerHTML = player.duration;
} else {
player.pause();
btn.value = "Play";
}
};
player.onended = function() {
btn.value = "Play";
};
var x = setTimeout(function timing() {
curtime.innerHTML = player.currentTime;
var y = setTimeout(timing, 100);
y = null;
}, 100);
x = null;
检测编码器是否支持
canPlayType()：该方法接收一种格式/编解码器字符串，返回"probably"、"maybe"或""（ 空字符串）。
if (audio.canPlayType("audio/mpeg")){
//进一步处理
}
canPlayType()传入了一种MIME类型，则返回值很可能是"maybe"或空字符串。
这是因为媒体文件本身只不过是音频或视频的一个容器，而真正决定文件能否播放的还是编码的格式。在同时传入MIME类型和编解码器的情况下，可能性就会增加，返回的字符串会变成"probably"。下面来看几个例子。
var audio = document.getElementById("audio-player");
//只传入MIME类型，很可能"maybe"
if (audio.canPlayType("audio/mpeg")){
//进一步处理
}
//同时传入编解码器，可能是"probably"
if (audio.canPlayType("audio/ogg; codecs=\"vorbis\"")){
//进一步处理
}
4.历史状态管理
hashchange：可以知道URL的参数在什么时候发生变化，也就是什么时候该有所反应。
history.pushState(状态对象，新状态的标题，可选的相对URL)：将新的状态信息加载到历史状态中。
popstate：按下后退键之后触发，使状态对象（event.state）是当前状态。
popstate的state属性：包含当初以第一个参数传递给pushState()的状态对象。得到这个对象后，要把页面重置为状态对象中的数据表示状态。
注意：浏览器的第一个页面没有状态，因此单击后退键之后，浏览器返回第一个页面，event.state=null。
replaceState(状态对象，新状态的标题)：更新当前的状态，不会在历史状态栈中创建新状态，只会重写当前状态。
