html5脚本编程

(1)跨文档消息传递，XDM。指的是来自不同域的页面间传递消息。

XDM的核心是postMessage();向另一个地方传递数据，指是包含在当前页面中的iframe元素，由当前页面弹出的窗口。

var iframeWindow = document.getElementById("myframe").contentWindow;

iframeWindow.postMessage("A secret","http://www.wrox.com");

接收到XDM消息时，会触发window对象的message事件。这个事件是以异步形式触发的。

data:作为postMessage()第一个参数传入的字符串数据。

origin:发送消息的文档所在的域，例如“http://www.wrox.com”

source:发送消息的文档的window对象的代理。

（2）原生拖放API

网页中的任何元素都可以得到拖放。

拖动某元素时，一次触发

dragstart,

drag,(相当于mousemove)

dragend

当某个元素被拖动到一个有效的放置目标上时，依次发生

dragenter（相当于mouseover）

dragover

dragleave或drop

dataTransfer对象 传递字符串数据,有两个方法getData(), setData()

在ondragenter事件处理程序中设置dropEffect属性。

在ondragstart事件处理程序中设置effectAllowed属性。

dropEffect属性 与 effectAllowed属性 相似。

<img src="smile.gif" draggable="false" alt="Smiley face">

<div draggable="true">...</div>

（3）音频与视频

使用canPlayType()检查浏览器是否支持特定的格式。

（4）历史状态管理

使用hashchange事件，HTML5通过更新history对象为管理历史状态提供了方便。

history.pushState({name:"Nicholas"},"Nicholas' page","nicholas.html");状态对象、新状态的标题和可选的相对URL

因为pushState()会创建新的历史状态，按下后退按钮，会触发window对象的popstate事件。

它的state属性，包含着pushState()的状态对象。

更新当前状态，可以调用replaceState(),传入的参数与pushState()的前两个参数相同。调用这个方法不会再历史状态栈中创建新状态，只会重写当前状态。

history.replaceState({name:"Greg"},"Greg's page");