by caix in 深圳
跨文档消息传递
跨文档消息传送（cross-document messaging），有时候简称为 XDM，指的是在来自不同域的页面间 传递消息。例如，www.wrox.com 域中的页面与位于一个内嵌框架中的 p2p.wrox.com 域中的页面通信
跨文档消息传递简称 XDM，指不同域的页面间传递消息， XDM 的核心是 postMessage() 方法，用于向另一个地方传递数据
通过 iframe 解决跨域问题 其原理就是 使用 postMessage() 方法
postMessage()
postMessage()
接收两个参数:
一条消息 和 一个表示消息接收方来自哪个域的字符串
注意:
postMessage() 向另一个地方传递数据。对于 XDM 而言，“另一个地方”指的 是包含在当前页面中的元素，或者由当前页面弹出的窗口
接收到 XDM 消息时，会触发 window 对象的 message 事件，这个事件是以异步形式触发的，触发事件之后传递给 onmessage 处理程序的事件对象包括以下三个属性:
data：作为 postMessage() 第一个参数传入的字符串数据
origin：发送消息的文档所在的域，例如"www.wrox.com"
source：发送消息的文档的 window 对象的代理。这个代理对象主要用于在发送上一条消息的窗口中调用 postMessage()方法。如果发送消息的窗口来自同一个域，那这个对象就是window
原生拖放
最早引入的是IE4，只能拖放img和某些文本
拖放事件
通过拖放事件，可以控制拖放相关的各个方面。其中最关键的地方在于确定哪里发生了拖放事件， 有些事件是在被拖动的元素上触发的，而有些事件是在放置目标上触发的。
拖动某元素时，将依次触发 下列事件:
1、dragstart
2、drag
3、dragend
当某个元素被拖动到一个有效的放置目标上时，下列事件会依次发生
1、dragenter
2、dragover
3、dragleave 或 drop
只要有元素被拖动到放置目标上，就会触发 dragenter 事件（类似于 mouseover 事件）。
紧随其后的是 dragover 事件，而且在被拖动的元素还在放置目标的范围内移动时，就会持续触发该事件
如果元素被拖出了放置目标，dragover 事件不再发生，但会触发 dragleave 事件（类似于 mouseout事件）
如果元素被放到了放置目标中，则会触发 drop 事件而不是 dragleave 事件
上述三个事件的目标都是作为放置目标的元素
自定义放置目标
阻止拖放的默认事件，即可实现自定义
var droptarget = document.getElementById("droptarget");
EventUtil.addHandler(droptarget, "dragover", function(event){
EventUtil.preventDefault(event);
});
EventUtil.addHandler(droptarget, "dragenter", function(event){
EventUtil.preventDefault(event);
});
EventUtil.addHandler(droptarget, "drop", function(event){
EventUtil.preventDefault(event);
});
dataTransfer 对象
是事件对象的一个属性，用于从被拖动元素向放置目标传递字符串格式的数据
方法:
1、setData()：设置数据
示例:
=> 设置文本数据
event.dataTransfer.setData("text", "some text");
=> 设置 URL
event.dataTransfer.setData("URL","http://www.wrox.com/");
2、getData()：获取数据
var text = event.dataTransfer.getData("text");
var url = event.dataTransfer.getData("URL");
dropEffect 与 effectAllowed
dropEffect：属性可以知道被拖动的元素能够执行哪种放置行为
"none"：不能把拖动的元素放在这里。这是除文本框之外所有元素的默认值
"move"：应该把拖动的元素移动到放置目标
"copy"：应该把拖动的元素复制到放置目标
"link"：表示放置目标会打开拖动的元素（但拖动的元素必须是一个链接，有 URL）
注意：
"link"：要使用 dropEffect 属性，必须在 ondragenter 事件处理程序中针对放置目标来设置它
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。
注意：
必须在 ondragstart 事件处理程序中设置 effectAllowed 属性。
可拖动
设置元素 draggable 为 true 即可变成可拖动元素
媒体元素
audio
video
属性列表
事件列表
检测解码器支持情况
canPlayType() 该方法接收一种格式/编解码器字符串
返回 "probably"、"maybe" 或 ""（空字符串）
var audio = document.getElementById("audio-player");
=> 很可能 "maybe"
if (audio.canPlayType("audio/mpeg")){
=> 进一步处理
}
=> 可能是 "probably"
if (audio.canPlayType("audio/ogg; codecs=\"vorbis\"")){
=> 进一步处理
}
历史状态管理器
历史状态管理是现代 Web 应用开发中的一个难点。在现代 Web 应用中，用户的每次操作不一定会 打开一个全新的页面，因此“后退”和“前进”按钮也就失去了作用，导致用户很难在不同状态间切换。
要解决这个问题，首选使用 hashchange 事件。HTML5 通过更新 history 对象为 管理历史状态提供了方便。
通过 hashchange 事件，可以知道 URL 的参数什么时候发生了变化，即什么时候该有所反应。
而通过状态管理 API ，能够在不加载新页面的情况下改变浏览器的 URL 。
为此，需要使用 history.pushState()方法，该方法可以接收三个参数：状态对象、新状态的标题和可选的相对 URL。
示例
history.pushState({name:"Nicholas"}, "Nicholas' page", "nicholas.html");
执行 pushState()方法后，新的状态信息就会被加入历史状态栈，而浏览器地址栏也会变成新的 相对 URL。
但是，浏览器并不会真的向服务器发送请求，即使状态改变之后查询 location.href 也会 返回与地址栏中相同的地址。
另外，第二个参数目前还没有浏览器实现，因此完全可以只传入一个空字 符串，或者一个短标题也可以。而第一个参数则应该尽可能提供初始化页面状态所需的各种信息。
因为 pushState()会创建新的历史状态，所以你会发现“后退”按钮也能使用了。
按下“后退” 按钮，会触发 window 对象的 popstate 事件①。popstate 事件的事件对象有一个 state 属性，这个 属性就包含着当初以第一个参数传递给 pushState()的状态对象。
EventUtil.addHandler(window, "popstate", function(event){
var state = event.state;
if (state){ => 第一个页面加载时 state 为空
processState(state);
}
});
注意
得到这个状态对象后，必须把页面重置为状态对象中的数据表示的状态（因为浏览器不会自动为你做这些）
记住，浏览器加载的第一个页面没有状态，因此单击“后退”按钮返回浏览器加载的第一个页面时，event.state 值为 null
要更新当前状态，可以调用 replaceState()，传入的参数与 pushState()的前两个参数相同。调用这个方法不会在历史状态栈中创建新状态，只会重写当前状态