HTML5脚本编程

一，跨文档消息传递
　　Cross-document message（XDM）
　　postMessage()方法，向另一个地方传递数据，接收两个参数，一条消息和一个表示接收方来自哪个域的字符串，
　　接收到XDM消息时，会触发window的message事件，事件是以异步形式触发的，
　　触发message事件后，传递给onmessage处理程序的事件对象包含三方面的重要信息
　　　　data:作为postMessage()第一个参数传人的字符串数据
　　　　origin：发送消息的文档所在的域
　　　　source：发送消息的文档的window对象的代理
　　在onmessage处理程序中检测消息来源可以确保传入的消息来自已经的页面

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

　　第一个参数一般为字符串，在结构化数据时，先调用JSON.stringify(),在onmessage处理程序中调用JSON.parse()
二，原生拖放
1，拖放事件
　　拖动某元素时，触发dragstart事件，drag事件，dragend事件
　　　　dragstart事件：按下鼠标并开始移动鼠标时，在被拖放的元素上触发dragstart事件，通过ondragstart处理程序来运行javascript代码
　　　　drag事件：触发dragstart事件后，就会触发drag事件，在元素被拖动期间会持续触发该事件
　　　　dragend事件:当停止拖放时，就会触发dragend事件
　　当某个元素被拖动到有效的放置目标上时，就会触发dragenter事件，dragover事件，dragleave或drop事件
　　　　dragenter：只要元素被拖动到放置的目标上，就会触发dragenter事件
　　　　dragover：被拖动的元素还在放置目标的范围内移动时，就会持续触发该事件，超出了范围dragover就不会发生
　　　　dragleave：元素被拖出了放置目标，就会触发dragleave事件
　　　　drop：如果元素被放到了放置目标中，会触发drop事件
2，自定义放置目标
　　重写dragenter和dragover事件，可以把任何元素变成有效的放置目标

　　var droptarget = document.getElementById("droptarget");
　　EventUtil.addHendler(droptarget,"dragover",function(){
　　　　EventUtil.preventDefault(event);
　　});
　　EventUtil.addHandler(droptarget,"dragenter",function(){
　　　　EventUti.preventDefault(event);
　　});

　　放置事件的默认行为是打开被放置目标上的URL，取消默认行为

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

3，dataTransfer对象
　　是事件对象的一个属性，用于从被拖动元素向放置目标传递字符串格式的数据，
　　有两个方法setData(),getData(),setData的第一个参数就是getData唯一的参数，是一个字符串，表示保存数据类型，取值为text或url
　　保存在dataTransfer中的数据，在drop事件处理程序中读取
　　在拖动文本框中的文本时，浏览器调用setData()方法，将拖动的文本保存在其中，数据不会得到处理
　　在拖动链接或图像时，浏览器会调用setData()方法，将URL保存在其中，把它放置在另一个浏览器窗口中会打开该链接
　　为了实践兼容性
　　var url = dataTransfer.getData("url") || dataTransfer.getData("text/url-list");
　　var text = dataTransfer.getData("text");
4，dropEffect与effectAllowed
　　dataTransfer对象还有两个属性，确定被拖动元素以及作为放置目标的元素能够接收什么操作
　　dropEffect属性：可以知道被拖动的元素能够执行哪种放置行为，有四个值，必须在ondragenter事件处理程序中针对放置目标设置它
　　　　none：不能把拖动元素放在这里
　　　　move：应该把拖动的元素移动到放置目标
　　　　copy：应该把拖动的元素复制到放置目标
　　　　link：表示放置目标会打开拖动的元素（但拖动的元素必须是一个链接）
　　effectAllowed属性：表示允许拖动元素的哪种dropEffect，属性如下
　　　　uninitialized：没有给被拖动的元素设置任何放置行为
　　　　node：被拖动的元素不能有任何行为
　　　　copy：只允许值为copy的dropEffect
　　　　link：只允许值为link的dropEffect
　　　　move：只允许值为move的dropEffect
　　　　copyLink：允许值为copy和link的dropEffect
　　　　copyMove：允许值为copy和move的dropEffect
　　　　linkMove：允许值为link和move的dropEffect
　　　　all：允许任意的dropEffect
　　在ondragstart事件处理程序中设置effectAllowed属性
5，可拖放
　　draggable属性，true为可拖放，false为不可拖放
6，其他成员
　　dataTransfer对象还包含下列方法和属性
　　addElement(element)：为拖动添加了一个元素，添加这个元素只影响数据，firefox3.5实现
　　clearData(format)：清除以特定格式保存的数据
　　setDragImage(element,x,y)：指定一副图像，当拖动发生时，显示在光标下方，三个参数分别为要显示的HTML元素和光标在图像中的x,y坐标
　　types：当前保存的数据类型
三，媒体元素
<video id="myVideo">
<scoure src="conference.webm" type="video/webm;codecs=‘vp8,vorbis‘">
<scoure src="conference.ogv" type="video/ogg;codecs=‘theroa,vorbis‘">
<scoure src="conference.mpg">
Video pleyer not available
</video>
1，属性
　　controls:取得或设置control属性，用于显示或隐藏浏览器内置的控件
　　currentLoop：媒体文件已经循环的次数
　　buffered：时间范围，表示已下载的缓冲的时间范围的对象
　　duration：媒体的总播放时间
2，事件
　　abort：下载中断
　　enptied：网络连接中断
　　error：下载期间发生网络错误
　　seeked：搜索结束
　　waiting：播放暂停，等待下载更多数据
3，自定义媒体播放器
　　使用play()，pause()，两个方法可以手工控制媒体文件的播放
4，检测编解码器的支持情况
　　canPlayType()方法，接受一种格式/编解码字符串，返回probably，maybe，空字符串
　　probably和maybe都是真值
5，Audio类型
　　audio元素还有一个原生的javascript构造函数，可以在任何时候播放音频

　　var audio = new Audio("sound.mp3");
　　EventUtil.addHandler(audio,"canplaythrough",function(event){
　　　　audio.play();
　　});

四，历史状态管理
　　hashchange事件，可以知道URL的参数什么时候发生了变化，
　　HTML5通过更新history对象管理历史状态，能够在不加载该页面的情况下改变浏览器的URL
　　history.pushState(状态对象，新状态的标题，可选的相对URL),第二参数还没有实现，一般传入null
　　　　history.pushState({name:"Nicholas"},"Nicholas‘page","nicholas.html");
　　使用pushState()方法后，新的状态信息会被加入历史状态栏，浏览器的地址栏也会变成相应的URL，location.href也会返回新的URL，但是不会真的 向服务　　　器请求
　　pushState()方法会创建新的历史状态，后退按钮可用，按下会触发window对的popstate事件，
　　popState事件有一个state属性，包含着当初以第一个参数传递给pushState()的状态对象

　　　　EventUtil.addHandler(window,"popState",function(){
　　　　　　var state = event.state;
　　　　　　if(state){ processState(state); }
　　　　});

　　要更新当前状态，调用replaceState(),传入的参数与pushState()的前两个参数相同，调用这个方法不会在历史状态栈中创建新状态，只会重写当前状态
　　　　history.replaceState({name:"Greg"},"Greg‘s page");

HTML5脚本编程,古老的榕树,5-wow.com