第16章 HTML5脚本编程

跨文档信息传送

跨文档消息传送（cross-document messaging），有时候也简称为XDM，指的是来自不同域的页面间传递消息。
XDM的核心是postMessage()方法：向另一个地方传递数据
postMessage()方法接收两个参数：一条消息和一个表示消息接收方来自哪个域的字符串。
接收到XDM消息时，会触发window对象的message事件。这个事件是以异步形式触发的，因此从发送消息到接受消息（触发接受窗口的message事件）可能要经过一段时间的延迟。

接受到消息后验证发送窗口的来源是至关重要的。

EventUtil.addHandler(window, "message", function (event) {
    //确保发送消息的域是已知的域
    if (event.origin == "http://www.w3cmm.com") {
        //处理接收到的数据
        processMessage(event.data);
        //可选：向来源窗口发送回执
        event.source.postMessage("Received!", "http://p2p.w3cmm.com");
    }
});

event.source大多数情况下只是window对象的代理，并非实际的window对象。换句话说，不能通过这个代理对象访问window对象的其它任何信息。只通过这个代理调用postMessage()就好，这个方法永远不存在，永远可以调用。

原生拖放

拖放事件

最关键的地方在于确定那里发生了拖放事件，有些事件是在被拖动的元素上触发的，而有些事件是在放置目标上触发的。
拖动某些元素时，将一次触发下列事件：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对象，它是事件对象的一个属性，用于从被拖动元素向放置目标传递字符串格式的数据。

getData()和setData()方法

//设置和接收文本数据
event.dataTransfer.setData("text", "some text");
var text = event.dataTransfer.getData("text");

//设置和接收URL
event.dataTransfer.setData("URL", "https://www.w3cmm.com/");

在拖放链接或图像时，会调用setData()方法并保存URL。然后，在这些元素被拖放到放置目标时，就可以通过getData()读到这些数据。
保存在dataTransfer对象中的数据只能在drop事件处理程序中读取。

dropEffect与effectAllowed

利用dataTransfer对象，可不光是能够传输数据，还能通过它来确定被拖动的元素以及作为放置目标的元素能够接受什么操作。
dropEffect：可以知道被拖动的元素能够执行哪种放置行为。
effectAllowed：只有搭配effectAllowed属性才有用。effectAllowed属性表示允许拖放元素的哪种dropEffect。

可拖动

默认情况下，图像、链接和文本是可以拖动的
draggable属性，表示元素是否可以拖动。

媒体元素

<audio>和<video>标签

自定义媒体播放器

<div class="mediaplayer"> 
    <div class="video">
        <video id="player" src="movie.mov" poster="mymovie.jpg"
               width="300" height="200">
            Video player not available.
        </video>
    </div>
    <div class="controls">
        <input type="button" value="Play" id="video-btn">
        <span id="curtime">0</span>/<span id="duration">0</span>
    </div>
</div>

//取得元素的引用
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);

检测编解码器的支持情况:canPlayType()方法，该方法接收一种格式/编解码器字符串，返回”probably”、”maybe”或””（空字符串）。
传入了一种MIME类型，则返回值很可能是”maybe”或空字符串。
在同时传入MIME类型和编解码器的情况下，可能性就会增加，返回的字符串会变成”probably”。

历史状态管理

通过状态管理API，能够在不加载新页面的情况下改变浏览器的URL。
history.pushState()方法，该方法可以接收三个参数：状态对象、新状态的标题和可选的相对URL。
要更新当前状态，可以调用replaceState()