指的是來自不同域的頁面間傳遞消息。 postMessage():2個參數(shù)，一條消息和一個表示消息接收方來自哪個域的字符串。第二個參數(shù)是保障通信安全。
var iframeWindow = document.getElementById('myframe').contentWindow;iframeWindow.postMessage("a secret","http://www.wrox.com");//向內(nèi)嵌框架發(fā)送一條消息如果框架中的文檔不是來源于指定的域則postMessage()什么也不做。接收到XDM消息時，會觸發(fā)window對象的message事件。傳遞給onmessage處理程序的事件對象有3個屬性： 1. data:postMessage()的第一個參數(shù)，即發(fā)送的消息。 2. origin:發(fā)送消息的文檔所在的域。 3. source:發(fā)送消息的文檔的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"); }}拖動某元素時，將依次觸發(fā)下列事件： 1. dragstart 2. drag 3. dragend 當某個元素被拖動到一個有效的放置目標上時，下列事件會依次發(fā)生： 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);}它是事件對象的一個屬性，用于從被拖動元素向放置目標傳遞字符串格式的數(shù)據(jù)。 有兩個主要方法： getData():傳入一個參數(shù)，表示要保存的數(shù)據(jù)類型。IE只定義了“text”和”URL“兩種有效的數(shù)據(jù)類型。HTML5則允許各種MIME類型。 setData():2個參數(shù)，第一個參數(shù)為
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");在拖動元素時瀏覽器會自動調(diào)用setData()方法把對應的數(shù)據(jù)保存在dataTransfer對象中，這些元素被放置在目標上時就可以通過getData()方法讀到這些數(shù)據(jù)。 注：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可以知道被拖動的元素能夠執(zhí)行哪種放置行為。有以下取值：
“none”:不能把拖動的元素放在這里。這是除文本框之外所有元素的默認值。 “move”:應該把拖動的元素移動到放置目標。 “copy”:應該把拖動的元素復制到放置目標。 “l(fā)ink”：表示放置目標會打開拖動的元素。
要使用dropEffect屬性，必須在ondragenter事件中針對放置目標來設(shè)置他。并且它只有搭配effectAllowed屬性才有用。 effectAllowed屬性表示允許拖動元素的哪種dropEffect。取值：
uninitialized:沒有給拖動元素設(shè)置任何放置行為。 none:被拖動的元素不能有任何的行為。 copy:只允許值為copy的dropEffect. link:只允許值為link的dropEffect. move:只允許值為move的dropEffect. copyLink: copyMove: linkMove: all:允許任何dropEffect.
必須在ondragstart事件中設(shè)置effectAllowed屬性。
默認情況下，圖像，鏈接和文本都是可以拖動的。文本只有在選中的情況下才可以被拖動。HTML5為所有元素規(guī)定了一個draggable屬性。設(shè)置這個屬性可以改變元素的可拖動屬性。
//讓圖像不能被拖動<img src="smile.gif" draggable="false">//讓這個元素可以拖動<div draggable="true">...</div>另外為了讓Firefox支持可拖動屬性，必須添加一個ondragstart事件處理程序。并在dataTransfer對象總保存一些信息。
dataTransfer還有一個setDragImage(element,x,y)方法：指定一幅圖像，當拖動發(fā)生時，顯示在光標下方。參數(shù)分別為：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可以在加載視頻內(nèi)容期間顯示一幅圖像。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()方法，可以手工控制媒體文件的播放。組合使用屬性，事件就可以創(chuàng)建自定義的媒體播放器。
<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():接收一個參數(shù)，一種格式/編解碼器字符創(chuàng)
if(audio.canPlayType("audio/mpeg"))HTML5通過更新history對象為管理歷史狀態(tài)提供了方便。 通過haschange事件，可以知道URL的參數(shù)什么時候發(fā)生了變化。而通過狀態(tài)管理API可以在不加載頁面的情況下改變?yōu)g覽器的URL。需要使用history.pushState()方法，該方法可以接受三個參數(shù)：狀態(tài)對象，新狀態(tài)的標題和可選的相對URL。
history.pushState({name:"Nicholas"},"nichosla page","haha.html");執(zhí)行此方法，新的狀態(tài)信息就會被加入歷史狀態(tài)棧，瀏覽器地址欄也會變成新的相對URL。但是瀏覽器并不會真的向服務器發(fā)送請求。第二個參數(shù)目前還沒有瀏覽器實現(xiàn)。傳入空字符串即可。按下后退按鈕后就可以觸發(fā)window對象的popState事件。該對象的一個state屬性就是pushState()的第一個參數(shù)。 要更新當前狀態(tài)，可以是使用replaceState()，傳入的參數(shù)與pushState的前兩個參數(shù)相同。
新聞熱點
疑難解答
