指的是来自不同域的页面间传递消息。 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);}它是事件对象的一个属性,用于从被拖动元素向放置目标传递字符串格式的数据。 有两个主要方法: 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");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的前两个参数相同。
新闻热点
疑难解答