跨文档消息传递
跨文档消息传递简称 XDM，指不同域的页面间传递消息， XDM 的核心是 postMessage() 方法，用于向另一个地方传递数据，接收两个参数：一条消息、表示消息接收方来自哪个域的字符串。
接收到 XDM 消息时，会触发 window 对象的 message 事件，这个事件是以异步形式触发的，触发事件之后传递给 onmessage 处理程序的事件对象包括以下三个属性：
- data：作为 postMessage() 第一个参数传入的字符串数据
- origin：发送消息的文档所在的域，例如"www.wrox.com"
- source：发送消息的文档的 window 对象的代理。这个代理对象主要用于在发送上一条消息的窗口中调用 postMessage()方法。如果发送消息的窗口来自同一个域，那这个对象就是window
原生拖放
拖放事件
拖动某元素时，将依次触发下列事件：
- dragstart()
- drag()
- dragend()
当某个元素被拖动到一个有效的放置目标上时，下列事件会依次发生：
- dragenter()
- dragover()
- dragleave() 或 drop()
自定义放置目标
重写 dragenter 和 dragover 事件的默认行为，可以把任何元素变成有效的放置目标
var droptarget = document.getElementById("droptarget");
EventUtil.addHandler(droptarget, "dragover", function(event){
EventUtil.preventDefault(event);
});
EventUtil.addHandler(droptarget, "dragenter", function(event){
EventUtil.preventDefault(event);
});
dataTransfer 对象
dataTransfer 对象是事件对象的一个属性，用于从被拖动元素向放置目标传递字符串格式的数据。dataTransfer 对象有两个方法
- getData()：取得 setData() 设置的数据，接收一个参数：保存的数据类型的字符串，可取值为"text" 、"URL"或其他 MIME 类型
- setData()：设置数据，接收两个参数：保存的数据类型的字符串、保存的数据
dropEffect 与 effectAllowed
dropEffect 和 effectAllowed 是 dataTransfer 对象的属性，可用来确定被拖动的元素以及作为放置目标的元素能够接收什么操作。
dropEffect 属性可以知道被拖动的元素能够执行哪种放置行为。这个属性有下列 4个可能的值。
- "none"：不能把拖动的元素放在这里，这是除文本框之外所有元素的默认值
- "move"：应该把拖动的元素移动到放置目标
- "copy"：应该把拖动的元素复制到放置目标
- "link"：表示放置目标会打开拖动的元素（但拖动的元素必须是一个链接，有 URL）
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 属性，表示元素是否可以拖动。图像和链接的 draggable 属性自动被设置成了 true，而其他元素这个属性的默认值都是 false。
其他成员
dataTransfer 对象还包括下列方法和属性：
- addElement(element)：为拖动操作添加一个元素。添加这个元素只影响数据（即增加作为拖动源而响应回调的对象），不会影响拖动操作时页面元素的外观
- clearData(format)：清除以特定格式保存的数据
- setDragImage(element, x, y)：指定一幅画像，当拖动发生时，显示在光标下方。这个方法接收的三个参数分别是要显示的 HTML 元素和光标在他乡中的 x、y 坐标
- types：当前保存的数据类型
媒体元素
历史状态管理
- history.pushState()：在不加载新页面的情况下改变浏览器的 URL。接收三个参数：状态对象、新状态的标题、可选的相对 URL
- replaceState()：更新当前状态，接收两个参数：状态对象、新状态的标题
