HTML5脚本编程
一，跨文档消息传递
Cross-document message（XDM）
postMessage()方法，向另一个地方传递数据，接收两个参数，一条消息和一个表示接收方来自哪个域的字符串，
接收到XDM消息时，会触发window的message事件，事件是以异步形式触发的，
触发message事件后，传递给onmessage处理程序的事件对象包含三方面的重要信息
data:作为postMessage()第一个参数传人的字符串数据
origin：发送消息的文档所在的域
source：发送消息的文档的window对象的代理
在onmessage处理程序中检测消息来源可以确保传入的消息来自已经的页面
EventUtil.addHandler(window."message",function(){ if(event.origin == "http://www.wrow.com"){ //处理接收到的数据 processMessage(event.data); //可选：向来源窗口发送回执 event.source.postMessage("recevied!","http://p2p.wrow.com"); } });
第一个参数一般为字符串，在结构化数据时，先调用JSON.stringify(),在onmessage处理程序中调用JSON.parse()
二，原生拖放
1，拖放事件
拖动某元素时，触发dragstart事件，drag事件，dragend事件
dragstart事件：按下鼠标并开始移动鼠标时，在被拖放的元素上触发dragstart事件，通过ondragstart处理程序来运行javascript代码
drag事件：触发dragstart事件后，就会触发drag事件，在元素被拖动期间会持续触发该事件
dragend事件:当停止拖放时，就会触发dragend事件
当某个元素被拖动到有效的放置目标上时，就会触发dragenter事件，dragover事件，dragleave或drop事件
dragenter：只要元素被拖动到放置的目标上，就会触发dragenter事件
dragover：被拖动的元素还在放置目标的范围内移动时，就会持续触发该事件，超出了范围dragover就不会发生
dragleave：元素被拖出了放置目标，就会触发dragleave事件
drop：如果元素被放到了放置目标中，会触发drop事件
2，自定义放置目标
重写dragenter和dragover事件，可以把任何元素变成有效的放置目标
var droptarget = document.getElementById("droptarget"); EventUtil.addHendler(droptarget,"dragover",function(){ EventUtil.preventDefault(event); }); EventUtil.addHandler(droptarget,"dragenter",function(){ EventUti.preventDefault(event); });
放置事件的默认行为是打开被放置目标上的URL，取消默认行为
EventUtil.addHandler(droptarget,"drop",function(){ EventUtil.preventDefault(event); });
3，dataTransfer对象
是事件对象的一个属性，用于从被拖动元素向放置目标传递字符串格式的数据，
有两个方法setData(),getData(),setData的第一个参数就是getData唯一的参数，是一个字符串，表示保存数据类型，取值为text或url
保存在dataTransfer中的数据，在drop事件处理程序中读取
在拖动文本框中的文本时，浏览器调用setData()方法，将拖动的文本保存在其中，数据不会得到处理
在拖动链接或图像时，浏览器会调用setData()方法，将URL保存在其中，把它放置在另一个浏览器窗口中会打开该链接
为了实践兼容性
var url = dataTransfer.getData("url") || dataTransfer.getData("text/url-list");
var text = dataTransfer.getData("text");
4，dropEffect与effectAllowed
dataTransfer对象还有两个属性，确定被拖动元素以及作为放置目标的元素能够接收什么操作
dropEffect属性：可以知道被拖动的元素能够执行哪种放置行为，有四个值，必须在ondragenter事件处理程序中针对放置目标设置它
none：不能把拖动元素放在这里
move：应该把拖动的元素移动到放置目标
copy：应该把拖动的元素复制到放置目标
link：表示放置目标会打开拖动的元素（但拖动的元素必须是一个链接）
effectAllowed属性：表示允许拖动元素的哪种dropEffect，属性如下
uninitialized：没有给被拖动的元素设置任何放置行为
node：被拖动的元素不能有任何行为
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属性
5，可拖放
draggable属性，true为可拖放，false为不可拖放
6，其他成员
dataTransfer对象还包含下列方法和属性
addElement(element)：为拖动添加了一个元素，添加这个元素只影响数据，firefox3.5实现
clearData(format)：清除以特定格式保存的数据
setDragImage(element,x,y)：指定一副图像，当拖动发生时，显示在光标下方，三个参数分别为要显示的HTML元素和光标在图像中的x,y坐标
types：当前保存的数据类型
三，媒体元素
<video id="myVideo">
<scoure src="conference.webm" type="video/webm;codecs='vp8,vorbis'">
<scoure src="conference.ogv" type="video/ogg;codecs='theroa,vorbis'">
<scoure src="conference.mpg">
Video pleyer not available
</video>
1，属性
controls:取得或设置control属性，用于显示或隐藏浏览器内置的控件
currentLoop：媒体文件已经循环的次数
buffered：时间范围，表示已下载的缓冲的时间范围的对象
duration：媒体的总播放时间
2，事件
abort：下载中断
enptied：网络连接中断
error：下载期间发生网络错误
seeked：搜索结束
waiting：播放暂停，等待下载更多数据
3，自定义媒体播放器
使用play()，pause()，两个方法可以手工控制媒体文件的播放
4，检测编解码器的支持情况
canPlayType()方法，接受一种格式/编解码字符串，返回probably，maybe，空字符串
probably和maybe都是真值
5，Audio类型
audio元素还有一个原生的javascript构造函数，可以在任何时候播放音频
var audio = new Audio("sound.mp3"); EventUtil.addHandler(audio,"canplaythrough",function(event){ audio.play(); });
四，历史状态管理
hashchange事件，可以知道URL的参数什么时候发生了变化，
HTML5通过更新history对象管理历史状态，能够在不加载该页面的情况下改变浏览器的URL
history.pushState(状态对象，新状态的标题，可选的相对URL),第二参数还没有实现，一般传入null
history.pushState({name:"Nicholas"},"Nicholas'page","nicholas.html");
使用pushState()方法后，新的状态信息会被加入历史状态栏，浏览器的地址栏也会变成相应的URL，location.href也会返回新的URL，但是不会真的 向服务 器请求
pushState()方法会创建新的历史状态，后退按钮可用，按下会触发window对的popstate事件，
popState事件有一个state属性，包含着当初以第一个参数传递给pushState()的状态对象
EventUtil.addHandler(window,"popState",function(){ var state = event.state; if(state){ processState(state); } });
要更新当前状态，调用replaceState(),传入的参数与pushState()的前两个参数相同，调用这个方法不会在历史状态栈中创建新状态，只会重写当前状态
history.replaceState({name:"Greg"},"Greg's page");
