js高级程序设计笔记11--HTML5脚本编程

跨文档消息传递

指的是来自不同域的页面间传递消息。
postMessage():2个参数，一条消息和一个表示消息接收方来自哪个域的字符串。第二个参数是保障通信安全。

var iframeWindow = document.getElementById('myframe').contentWindow;
iframeWindow.postMessage("a secret","http://www.wrox.com");//向内嵌框架发送一条消息

如果框架中的文档不是来源于指定的域则postMessage()什么也不做。接收到XDM消息时，会触发window对象的message事件。传递给onmessage处理程序的事件对象有3个属性：
1. data:postMessage()的第一个参数，即发送的消息。
2. origin:发送消息的文档所在的域。
3. source:发送消息的文档的window对象的代理。不能通过此对象访问window对象的其他任何信息。

EventUitl.addHandler(window,"message",function(event)){
    if(event.origin == "http://www.wrox.com"){
        processMessage(event.data);
        event.source.postMessage("received","http://p2p.wrox.com");
    }
}

原生拖放

拖放事件

拖动某元素时，将依次触发下列事件：
1. dragstart
2. drag
3. dragend
当某个元素被拖动到一个有效的放置目标上时，下列事件会依次发生：
1. dragenter
2. dragover
3. dragleave或drop

自定义放置目标

可以把任何元素变成有效的放置目标。方法是重写dragenter和dragover事件的默认行为。

EventUitl.addHandler(droptarget,"dragover",function(event)){
    EventUtil.preventDefault(event);
}
EventUitl.addHandler(droptarget,"dragenter",function(event)){
    EventUtil.preventDefault(event);
}

在Firefox3.5+中，放置事件的默认行为是打开被放到放置目标上的URL。因此如果是把文本拖放到放置目标上，则会导致无效URL错误。因此要取消drop事件的默认行为。阻止它打开URL。

EventUitl.addHandler(droptarget,"drop",function(event)){
    EventUtil.preventDefault(event);
}

dataTransfer对象

它是事件对象的一个属性，用于从被拖动元素向放置目标传递字符串格式的数据。
有两个主要方法：
getData():传入一个参数，表示要保存的数据类型。IE只定义了“text”和”URL“两种有效的数据类型。HTML5则允许各种MIME类型。
setData():2个参数，第一个参数为

event.dataTransfer.setData("text","some text");
var text = event.dataTransfer.getData("text");
event.dataTransfer.setData("URL","http://www.wrox.com");
var url = event.dataTransfer.getData("URL");

在拖动元素时浏览器会自动调用setData()方法把对应的数据保存在dataTransfer对象中，这些元素被放置在目标上时就可以通过getData()方法读到这些数据。
注：Firefox在其第5个版本之前不能正确的将“url”和”text”映射为”text/uri-list”和“text/plain”，但能把”Text”映射为”text/plain”。

var url = dataTransfer.getData("url") || dataTransfer.getData("text/uri-list");
var text = dataTransfer.getData("Text");

dropEffect与effectAllowed

dataTransfer对象还有两个属性：dropEffect与effectAllowed。
dropEffect可以知道被拖动的元素能够执行哪种放置行为。有以下取值：

“none”:不能把拖动的元素放在这里。这是除文本框之外所有元素的默认值。
“move”:应该把拖动的元素移动到放置目标。
“copy”:应该把拖动的元素复制到放置目标。
“link”：表示放置目标会打开拖动的元素。

要使用dropEffect属性，必须在ondragenter事件中针对放置目标来设置他。并且它只有搭配effectAllowed属性才有用。
effectAllowed属性表示允许拖动元素的哪种dropEffect。取值：

uninitialized:没有给拖动元素设置任何放置行为。
none:被拖动的元素不能有任何的行为。
copy:只允许值为copy的dropEffect.
link:只允许值为link的dropEffect.
move:只允许值为move的dropEffect.
copyLink:
copyMove:
linkMove:
all:允许任何dropEffect.

必须在ondragstart事件中设置effectAllowed属性。

可拖动

默认情况下，图像，链接和文本都是可以拖动的。文本只有在选中的情况下才可以被拖动。HTML5为所有元素规定了一个draggable属性。设置这个属性可以改变元素的可拖动属性。

//让图像不能被拖动
<img src="smile.gif" draggable="false">
//让这个元素可以拖动
<div draggable="true">...</div>

另外为了让Firefox支持可拖动属性，必须添加一个ondragstart事件处理程序。并在dataTransfer对象总保存一些信息。

dataTransfer还有一个setDragImage(element,x,y)方法：指定一幅图像，当拖动发生时，显示在光标下方。参数分别为：Hmtl元素和光标在图像中的x,y坐标。

媒体元素

HTML5新增了两个标签和

<video src="conference.mpg" id="muvideo">video palyer not available</video>
<audio src="song.mp3" id="myAudio">audio player not available</audio>

还可以指定widht和height属性指定视频播放器大小。poster属性指定图像的URI可以在加载视频内容期间显示一幅图像。controls属性浏览器会显示UI控件。
并非所有浏览器都支持所有媒体格式。所以可以指定多个不通的媒体来源。

<video id="myvideo">
  <source src="conference.webm" type="video/webm;codecs='vp8,vorbis>
  <source src="conference.ogv" type="video/ogg;codecs='theora,vorbis>
  <source src="conference.mpg">
video palyer not available
</video>

属性（自行查阅）

事件 （自行查阅）

自定义媒体播放器

使用和元素的play()和pause()方法，可以手工控制媒体文件的播放。组合使用属性，事件就可以创建自定义的媒体播放器。

<div class="mediaplayer">
    <div class="video">
        <video id="palyer" src="movie.mov" poster="mymovie.jpg" width="200" 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>
//js代码
var player = document.getElementById("player"),
    btn = document.getElementById("btn"),
    curtime = document.getElementById("curtime"),
    duration = document.getElementById("duration");
//更新播放时间
duration.innerHTML = palyer.duration;
EventUtil.addHandler(btn,"click",function(event)){
    if(player.paused){
        player.play();
        btn.value = "pause";
    }else{
        player.pause();
        player.value = "play";
    }
}
//定时更新当前时间
setInverval(function(){
    curtime.innerHTML = player.currentTime;
},250);

检测编码器的支持情况

canPlayType():接收一个参数，一种格式/编解码器字符创

if(audio.canPlayType("audio/mpeg"))

历史状态管理

HTML5通过更新history对象为管理历史状态提供了方便。
通过haschange事件，可以知道URL的参数什么时候发生了变化。而通过状态管理API可以在不加载页面的情况下改变浏览器的URL。需要使用history.pushState()方法，该方法可以接受三个参数：状态对象，新状态的标题和可选的相对URL。

history.pushState({name:"Nicholas"},"nichosla page","haha.html");

执行此方法，新的状态信息就会被加入历史状态栈，浏览器地址栏也会变成新的相对URL。但是浏览器并不会真的向服务器发送请求。第二个参数目前还没有浏览器实现。传入空字符串即可。按下后退按钮后就可以触发window对象的popState事件。该对象的一个state属性就是pushState()的第一个参数。
要更新当前状态，可以是使用replaceState()，传入的参数与pushState的前两个参数相同。