HTML5脚本编程
跨文档消息传递
- 跨文档消息传送，简称为XMD，指的是来自不同域的页面间传递消息
- XMD的核心是postMessage()方法，在HTML5规范中，除了XDM部分之外的其他部分也会提到这个方法名，但都是为了同一个目的，向另一个地方传递参数。对于XDM而言，另个地方指的是包含当前页面中的<iframe>元素，或者由当前页面弹出的窗口
-
postMessage()方法接收两个参数，一条消息和一个表示消息接收方来自哪个域的字符串
//所有支持XDM的浏览器也支持iframe的contentWindow属性var iframeWindow=document.getElementById("myframe").contentWindow;iframeWindow.postMessage("A secret","http://www.wwrox.com") -
接收到XDM消息时，会触发window对象的message事件，传递给onmessage处理程序的事件对象包含三方面的重要信息
- data，作为postMessage()第一个参数 传入的字符串数据
- origin，发送消息的文档所在的域
- source，发送消息的文档的window对象的dialing，这个代理对象主要用于在发送上一条消息的窗口中调用postMessage()方法，如果发送消息的窗口来自同一个域，那么这个对象就是window
原生拖放
拖放事件
- 拖动元素时，依次触发dragstart、drag、dragend
- 某元素被拖动到有效目标上时，依次触发dragenter、dragover、dragleave或drop
自定义放置目标
-
将元素变成一个放置目标
var droptarget=document.getElementById("droptarget");EventUtil.addHandler(droptarget,"dragover",function(event){ EventUtil.preventDefault(event);});EventUtil.addHandler(droptarget,"dragenter",function(event){ EventUtil.preventDefault(event);});
data Transfer对象
- 是事件对象的一个属性，用于从被拖动元素向放置目标传递字符串格式的数据。因为是事件对象的属性，所以只能在拖放事件的处理程序中访问dataTransfer对象
-
dataTransfer对象有两个主要方法，getData()和setData()，getData()可以取得由setData()保存的值，setData()方法的第一个参数，也是getData()方法唯一的一个参数，是一个字符串，表示保存的数据类型
//设置和接收文本数据event.dataTransfer.setData("text","some text");var text=event.dataTrans//设置和接收URLevent.dataTransfer.setData("URL","http://www.wrox.com");var url=event.dataTransfer.getData("URL");
dropEffect与effectAllowed
-
通过dropEffect属性可以知道被拖动元素能够执行哪种放置行为
- none，不能把拖动的元素放在这里，这是除文本框之外所有元素的默认值。
- move，应该把拖动的元素移动到放置目标
- copy，应该把拖动的元素复制到放置目标
- link，表示放置目标会打开拖动的元素，但拖动的元素必须是一个链接，有URL
-
dropEffect属性只有搭配effectAllowed属性才有用，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
...
其他成员
-
HTML5规范规定dataTransfer对象还应该包含下列方法和属性
- addElement，为拖动操作添加一个元素，添加这个元素只影响数据，不会影响拖动操作时页面元素的外观
- clearData，清除以特定格式保存的数据
- setDragImage，指定一副图像，当拖动发生时，显示在光标下方。这个方法接收的三个参数分别是要显示的HTML元素和光标在图像中的x、y坐标
- types，当前保存的数据类型，是一个类似数组的集合
媒体元素
-
不用再标签中指定src属性，而是像下面这样使用一个或多个<source>元素
属性
事件
自定义媒体播放器
-
<audio>和<video>元素的play()和pause()方法，可以手工控制媒体文件的播放
//取得元素的引用var player = document.getElementById("player"), btn = document.getElementById("video-btn"), curtime = document.getElementById("curtime"), duration = document.getElementById("duration");//更新播放时间duration.innerHTML = player.duration;//为按钮添加事件处理程序EventUtil.addHandler(btn, "click", function(event){ if (player.paused){ player.play(); btn.value = "Pause"; } else { player.pause(); btn.value = "Play"; }});//定时更新当前时间setInterval(function(){ curtime.innerHTML = player.currentTime;}, 250);
检测编码器的支持情况
var audio = document.getElementById("audio-player");//很可能"maybe"if (audio.canPlayType("audio/mpeg")){//进一步处理}//可能是"probably"if (audio.canPlayType("audio/ogg; codecs=\"vorbis\"")){//进一步处理} 历史状态管理
-
通过 hashchange 事件，可以知道 URL 的参数什么时候发生了变化，即什么时候该有所反应。而通过状态管理 API，能够在不加载新页面的情况下改变浏览器的 URL。为此，需要使用history.pushState() 方法，该方法可以接收三个参数：状态对象、新状态的标题和可选的相对 URL。
history.pushState({name:"Nicholas"}, "Nicholas' page", "nicholas.html");EventUtil.addHandler(window, "popstate", function(event){ var state = event.state; if (state){ //第一个页面加载时 state 为空 processState(state); }});