HTML5脚本编程

（一）跨文档消息传递

postMessage():向包含在当前页面的<iframe>元素，或由当前页面弹出的窗口传递数据。

接收两个参数：一条消息和一个表示消息接收方来自哪个域的字符串。

//所有支持XDM的浏览器也支持iframe的contentWindow属性
var iframeWindow = document.getElementById("myframe").contentWindow;
iframeWindow.postMessage("A secret","http://www.worx.com");

接收到XDM消息后会触发window对象的message事件，传递给onmessage处理程序的事件对象包含data（postMessage的第一个参数）、origin（发生消息的文档所在的域）、source（发送消息的文档的window对象的代理）。

收到消息后验证发送窗口的来源是非常重要的。

IE8+、Firefox3.5+、Safari 4+、Opera和Chrome。

（二）原生拖放

1.拖放事件

拖动某元素时，依次触发的事件：dragstart、drag、dragend。

当某个元素被拖到一个有效的放置目标，依次触发：dragenter、dragover、dragleave或drop。

只要元素被拖到放置目标就会触发dragenter事件，紧随其后的是dragover事件，在被拖动的元素还在放置目标的范围内移动时，就会持续触发该事件。如果元素被拖出拖放目标会触发dragleave事件。

2.自定义放置目标

重写dragenter和dragover事件的默认行为，将元素变成有效的放置目标。

            if (event.type == "dropenter" || event.type == "dragover" || event.type=="drop"){
                EventUtil.preventDefault(event);
            }
        }

为了让Firefox 3.5+支持正常的拖放还要取消drop事件的默认行为，阻止它打开URL

  if (event.type=="drop"){
                EventUtil.preventDefault(event);
            }

3.dataTransfer对象

datatransfer 方法：getData()和setData()。

getData()参数：保存数据的类型，取值为"text"或"URL"。

在拖动文本框的文本会调用setData()方法，将拖动的文本以text格式保存在dataTransfer对象。在元素被拖放到放置目标时可以通过getData()读取数据。

IE10及之前版本不支持扩展的MIME类型名，Firefox5之前把Text映射为text/plain。

4.dropEffect与effectAllowed

dropEffect属性：知道被拖放的元素能支持哪种拖放行为。none、move、copy和link。

efectAllowed属性：允许拖放元素的哪种dropEffect。

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

5.可拖动

draggable属性：元素释放可以拖动。图像和链接被自动设置为true，其他元素都是false。

IE 10+、Firefox 4+、Safari 5+和Chrome。

6.其他成员

（三）媒体元素

<audio>和<video>

可以指定多个不同的媒体来源

<!-- 嵌入视频 -->
<video id="myVideo">
    <source src="*.webm" type="video/webm"; codecs=‘vp8, vorbis‘">
    <source src="*.ogv" type="video/ogg"; codecs=‘theora,vorbis" ">
    <source src="conference.mpg">
    Video player not avaliable.
</video>

<!-- 嵌入音频 -->
<audio id="myAudio">
      <source src="*.ogg" type="audio/ogg">
      <source src="*.mp3" type="audio/mpeg">
      Audio player not avaliable.
</audio>

IE9+、Firefox 3.5+、Safari 4+、Opera 10.5+、Chrome。

1.属性

2.事件

3.自定义媒体播放器

使用play()和pause()方法。

            //为按钮添加事件处理程序
            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); 

4.检测编解码器的支持情况

canPlayType()：接收一种格式/编解码器字符串，返回"probably"、"maybe"或""。如果传入MIME类型返回值可能是"maybe"或空字符串。

5.Audio类型

<audio>有一个构造函数Audio，可以在任何时候播放音频。

（四）历史状态管理

hashchage事件可以知道URL的参数什么时候发生了变化。

history.pushState()  接收三个参数：状态对象、新状态的标题和可选的相对URL。

执行pushState()后，新的状态信息会被加入历史状态栈，浏览器地址变成新的相对URL。

要更新当前状态，可以调用replaceState()，传入与pushState()的前两个参数。

Firefox 4+、Safari 5+、Opera 11.5+和Chrome。