HTML5脚本编程
一.跨文档消息传递：cross-document messaging 简XDM 。
1.它的核心是postMessage()方法：目的是向另一个地方传递数据，对于XDM而言，“另一个地方”指的是包含在当前页面中的<iframe>元素，或者由当前页面弹出的窗口。
2.postMessage()方法接收两个参数：一条消息和一个表示消息接收方来自哪个域的字符串，第二个参数对保障安全通信非常重要，可以防止浏览器把消息发送到不安全的地方。
3.支持XDM的浏览器有IE8+ Firefox3.5+ Safari4+ Opera Chrome ios版Safari 以及Android版WebKit
二.原生拖放
1.拖动某元素将以此触发下列事件dragstart drag dragend
2.当某个元素被拖动到一个有效的放置目标上时，下列事件会依次发生：dragenter dragover dragleave或drop.只要有元素被拖动到放置目标上，就会触发dragenter事件，紧随其后的是dragover事件.而且在被拖动的元素还在放置目标的范围内移动时，就会持续触发该事件。如果元素被拖出了放置目标，dragover事件不再发生，但会触发dragleave事件。如果元素被拖放到了放置目标中，则会触发drop事件而不是dragleave事件。
3.在拖动元素经过某些无效放置目标时，可以看到一种特殊的光标，表示不能放置，虽然所有元素都支持放置目标事件，但这些元素默认是不允许放置的。如果拖动元素经过不允许放置的元素，无论用户如何操作，都不会发生drop事件。不过可以通过下面方法吧任何元素都变成有效放置目标：就是重写dragenter和dragover事件的默认行为。例如，假设有一个ID为“droptarget”的div元素，可以用下面代码将它变成一个放置目标。如下
var droptarget = document.getElementById("droptarget");
EventUtil.addHandler(droptarget, "dragover", function(event){
EventUtil.preventDefault(event);
});
EventUtil.addHandler(droptarget, "dragenter", function(event){
EventUtil.preventDefault(event);
});
以上代码执行后，光标变成了允许放置的的符号，也就可以触发drop事件了。
而在Firefox3.5+中，放置事件的默认行为是打开被放到放置目标上的URL。也就是说，如果是把图像拖放到放置目标上，页面会转向图像文件；而如果是把文本拖放到放置目标上，则会导致无效URL错误，因此为了让Firefox支持正常的拖放，还要取消drop事件的默认行为，阻止它打开URL：
EventUtil.addHandler(droptarget, "drop", function(event){
EventUtil.preventDefault(event);
});
5.dataTransfer对象：它是事件对象的一个属性，用于从被拖动元素放置目标传递字符串格式的数据 。它主要有两个方法：getData()和setData()访问的时候如下 :
event.dataTransfer.setData("text", "some text");
var text = event.dataTransfer.getData("text");
在拖动文本框的文本时，浏览器会调用setData()方法，将拖动的文本以"text"格式保存在dataTransfer对象中.类似地，在拖放链接或图像时，会调用setData() 方法并保存URL，然后，在这些元素被拖放到放置目标时，通过getData()读到这些数据。 也可以再dragstart事件处理程序中调用setData()，手工保存自己要传输的数据，以便将来使用。
Firefox在其第五个版本之前不能正确地将“url”和“text”映射为“text/uri-list” 和“text/plain”.但是却能把"Text"映射为“text/plain”. 为了更好地在跨浏览器的情况下从dataTransfer对象取得数据，最好在取得URL数据时检测两个值，而在取得文本数据时使用“Text”.
var dataTransfer = event.dataTransfer;
//读取URL
var url = dataTransfer.getData("url") || dataTransfer.getData("text/uri-list");
//读取文本
var text = dataTransfer.getData("Text");
4.dropEffect和effectAllowed属性
三媒体元素HTML5新增了两个与媒体相关的标签分别是视频<audio>和音频<video>
首先是<video>简易播放MP3的代码
<script>
var EventUtil = {
//addHandler方法有3个参数：要操作的元素、事件名称和时间处理程序函数
//addHandler方法的作用是添加时间处理程序
addHandler : function(element,type,handler){
if (element.addEventListener){
element.addEventListener(type , handler, false);
} else if (element.attachEvent){
element.attachEvent("on"+type, handler);
} else {
element["on" + type] = handler;
}
}
};
</script>
<body>
<div class="mediaplayer">
<div class="video">
<video id="player" src="f(x)-La Cha Ta.mp3" 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>
<script>
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);
</script>
</body>
