读javascript高级程序设计12-HTML5脚本编程

一、跨文档消息传递（XDM）

1.发送消息

postMessage(msg,domain)用于发送跨文档消息。第一个参数是要传递的消息内容，第二个参数表示接收方来自哪个域。第二个参数有助于提高安全性，如果发现域不匹配则不会进行操作。

2.接收消息

接收到消息时，会触发window对象的message事件。传递给onmessage事件处理程序的对象主要包含三个信息：

data:对应postMessage()第一个参数传入的内容；
origin：发送消息的文档所在域。接收到消息后，检测消息来源是非常重要的步骤。
source：发送消息的文档的window对象代理。

实例：

outer.html：

<body><spanid="msg"></span><inputtype="text"id="input"><inputtype="button"id="submit"value="提交"><iframewidth="300"height="150"src="inner.html"id="frame"></iframe><scripttype="text/javascript"src="EventUtil.js"></script><scripttype="text/javascript">varbtn=document.getElementById('submit');//向iframe发送消息
EventUtil.addHandler(btn,'click',function(event) {varinput=document.getElementById('input') .value;variframe=document.getElementById('frame') .contentWindow;if(iframe.postMessage) {iframe.postMessage(input,'*');}else{alert('do not support postMessage');}});//接收iframe发送的消息
EventUtil.addHandler(window,'message',function(event){varmsg=document.getElementById('msg');msg.innerHTML=event.data;});</script></body>

inner.html：

<body><span id="msg"></span><input type="text" id="input"><input type="button" id="submit" value="提交"><script type="text/javascript" src="EventUtil.js"></script><script type="text/javascript">var msg = document.getElementById('msg');

//接收外层主窗体发送的消息EventUtil.addHandler(window, 'message', function (event) {msg.innerHTML=event.data;    });var submit=document.getElementById("submit");

//向外层主窗体发送消息EventUtil.addHandler(submit,'click',function(event){if(parent.postMessage) {var input = document.getElementById('input').value;parent.postMessage(input, '*');}else{alert('do not support postMessage');}});</script></body>

二、拖放

1. 拖放事件

被拖动元素会依次触发以下事件：

dragstart：按下鼠标键并开始移动时触发；
drag：在元素被拖动期间会持续触发该事件；
dragend：拖动停止时触发。

当元素拖动到一个目标元素时，会依次触发以下事件：

dragenter：元素被拖动到目标元素上时触发。
dragover:被拖动的元素在目标元素范围内移动时会持续触发。
dragleave或drop:当被拖动元素离开目标元素时触发dragleave。如果元素放到了目标元素中，则触发drop而不在触发dragleave。

虽然大多数元素支持拖放的目标元素事件，但是这些元素默认是不允许放置的。所以要使用preventDefault()取消这些元素的默认事件。

<img src="http://static.cnblogs.com/images/logo_small.gif" id="img" >
<div id="target" style="margin-right:10px;border:1px solid black; width:100px; height:100px;"></div>
<script type='text/javascript' src="EventUtil.js"></script>
<script type='text/javascript'>var image = document.getElementById("img");var handlerImg=function(event){event=EventUtil.getEvent(event);console.log(event.type);}            EventUtil.addHandler(image,"dragstart", handlerImg);EventUtil.addHandler(image,"drag", handlerImg);EventUtil.addHandler(image,"dragend", handlerImg);var handler=function(event){event=EventUtil.getEvent(event);event.preventDefault();console.log(event.type);}var target=document.getElementById("target");EventUtil.addHandler(target,"dragenter",handler);EventUtil.addHandler(target,"dragover",handler);EventUtil.addHandler(target,"dragleave",handler);EventUtil.addHandler(target,"drop",handler);</script>

2.dataTransfer对象

dataTransfer对象是事件对象的一个属性，用于从被拖动的元素向目标元素传递字符串类型的数据。保存在dataTransfer对象中的数据只能在ondrop事件中读取。几个常用方法：

setData(type,value)：设置用来设置数据。第一个参数是“Text”或者“url”，第二个参数是字符串类型的数据。text和url类型还是略有区别的，如果将数据保存为url，那么浏览器会把它当作网页中的链接。如果将其拖放到浏览器窗口中，浏览器就会打开该链接。
getData(type)：参数type是"Text"或“url”，与set中的设置保持一致。
setDragImage(target,x,y)：指定一幅图像，当拖动发生时，显示在光标下方。

<imgsrc="http://static.cnblogs.com/images/logo_small.gif"id="img" >
<divid="target"style="float:left;margin-left:300px;border:1px solid black; width:200px; height:100px;"></div>
<scripttype='text/javascript'src="EventUtil.js"></script>
<scripttype='text/javascript'>
varimage=document.getElementById('img');varhandlerImg= function(event) {event=EventUtil.getEvent(event);vartarget=EventUtil.getTarget(event);event.dataTransfer.setData('Text', target.id);event.dataTransfer.setData('url',target.getAttribute('src'));event.dataTransfer.setDragImage(target,10,10);
}
EventUtil.addHandler(image,'dragstart', handlerImg);varhandler= function(event) {event=EventUtil.getEvent(event);vartarget=EventUtil.getTarget(event);switch(event.type) {case 'drop':event.preventDefault();varid=event.dataTransfer.getData('Text');varurl=event.dataTransfer.getData('url');target.appendChild(document.getElementById(id));target.innerHTML+=url;break;case 'dragover':event.preventDefault();break;}
}vartarget=document.getElementById('target');
EventUtil.addHandler(target,'dragover', handler);
EventUtil.addHandler(target,'drop', handler);</script>

3.可拖放

默认情况下，图像、文本等是可以拖动的，大多数其他元素不能拖动。如果想让某个元素可拖动，只需设置draggable=true即可。

<divid="target"style="border:1px solid black; width:200px; height:100px;"draggable="false"></div>

三、媒体元素

1.音频和视频控件

<audioid="player"src="billyBrowsers.ogg"poster="smile.gif"controls>不支持音频</audio>
<videoid="player"src="billyBrowsers.ogg"poster="mymovie.jpg"width="300"height="200">不支持视频</video>

2.常用属性

autoplay:布尔型，设置是否自动播放。

controls：布尔型，用来设置浏览器中的自带控件是否显示。

currentSrc：当前播放的媒体文件url。

duration：媒体的总播放时间。

currentTime：当前已经播放的秒数。

loop：布尔型，媒体是否自动循环播放。

plaused：媒体播放器是否暂停。

src：媒体文件的来源。

<divclass="mediaplayer"><divclass="video"><audioid="player"src="billyBrowsers.ogg"poster="smile.gif"controls autoplay='true'>不支持音频</audio></div><divclass="controls"><inputtype="button"value="Play"id="audio-btn" /><spanid="curtime">0</span>/<spanid="duration">0</span></div></div><script>window.onload= function(){varplayer=document.getElementById("player");varbtn=document.getElementById("audio-btn");varcurtime=document.getElementById("curtime");varduration=document.getElementById("duration");duration.innerHTML=player.duration;           EventUtil.addHandler(btn,"click",function(event){if(player.paused){console.log(player.currentSrc);player.play();btn.value= "Pause";}else{player.pause();btn.value= "Play";}});setInterval(function(){curtime.innerHTML=player.currentTime;},250);              };</script>

3.Audio类型

<audio>元素有对应的构造函数Audio。其实不必将Audio插入到文档中，在创建Audio实例后就开始下载指定文件，下载完成后，调用play()方法就可以开始播放。

<script>window.onload= function(){varplayer=new Audio("billyBrowsers.ogg");EventUtil.addHandler(player,"canplay",function(){player.play();})};</script>

本文转自陈敬（Cathy）博客园博客，原文链接：http://www.cnblogs.com/janes/p/3924499.html，如需转载请自行联系原作者