摘要:腳本編程跨文檔消息傳遞跨文檔消息傳送,簡稱為,指的是來自不同域的頁面間傳遞消息的核心是方法,在規(guī)范中,除了部分之外的其他部分也會提到這個方法名,但都是為了同一個目的,向另一個地方傳遞參數(shù)。第一個頁面加載時為空
HTML5腳本編程 跨文檔消息傳遞
跨文檔消息傳送,簡稱為XMD,指的是來自不同域的頁面間傳遞消息
XMD的核心是postMessage()方法,在HTML5規(guī)范中,除了XDM部分之外的其他部分也會提到這個方法名,但都是為了同一個目的,向另一個地方傳遞參數(shù)。對于XDM而言,另個地方指的是包含當前頁面中的
postMessage()方法接收兩個參數(shù),一條消息和一個表示消息接收方來自哪個域的字符串
//所有支持XDM的瀏覽器也支持iframe的contentWindow屬性 var iframeWindow=document.getElementById("myframe").contentWindow; iframeWindow.postMessage("A secret","http://www.wwrox.com")
接收到XDM消息時,會觸發(fā)window對象的message事件,傳遞給onmessage處理程序的事件對象包含三方面的重要信息
data,作為postMessage()第一個參數(shù) 傳入的字符串數(shù)據(jù)
origin,發(fā)送消息的文檔所在的域
source,發(fā)送消息的文檔的window對象的dialing,這個代理對象主要用于在發(fā)送上一條消息的窗口中調(diào)用postMessage()方法,如果發(fā)送消息的窗口來自同一個域,那么這個對象就是window
原生拖放 拖放事件拖動元素時,依次觸發(fā)dragstart、drag、dragend
某元素被拖動到有效目標上時,依次觸發(fā)dragenter、dragover、dragleave或drop
自定義放置目標
將元素變成一個放置目標
var droptarget=document.getElementById("droptarget"); EventUtil.addHandler(droptarget,"dragover",function(event){ EventUtil.preventDefault(event); }); EventUtil.addHandler(droptarget,"dragenter",function(event){ EventUtil.preventDefault(event); });data Transfer對象
是事件對象的一個屬性,用于從被拖動元素向放置目標傳遞字符串格式的數(shù)據(jù)。因為是事件對象的屬性,所以只能在拖放事件的處理程序中訪問dataTransfer對象
dataTransfer對象有兩個主要方法,getData()和setData(),getData()可以取得由setData()保存的值,setData()方法的第一個參數(shù),也是getData()方法唯一的一個參數(shù),是一個字符串,表示保存的數(shù)據(jù)類型
//設(shè)置和接收文本數(shù)據(jù) event.dataTransfer.setData("text","some text"); var text=event.dataTrans //設(shè)置和接收URL event.dataTransfer.setData("URL","http://www.wrox.com"); var url=event.dataTransfer.getData("URL");dropEffect與effectAllowed
通過dropEffect屬性可以知道被拖動元素能夠執(zhí)行哪種放置行為
none,不能把拖動的元素放在這里,這是除文本框之外所有元素的默認值。
move,應該把拖動的元素移動到放置目標
copy,應該把拖動的元素復制到放置目標
link,表示放置目標會打開拖動的元素,但拖動的元素必須是一個鏈接,有URL
dropEffect屬性只有搭配effectAllowed屬性才有用,effectAllowed屬性表示允許拖動元素的哪種dropEffect,effectAllowed屬性可能的值如下
uninitialized,沒有給被拖動元素設(shè)置任何放置行為
none,被拖動的元素不能有任何行為
copy,只允許值為"copy"的dropEffect
link,只允許值為"link"的dropEffect
move,只允許值為"move"的dropEffect
copyLink,允許值為"copy"和"link"的dropEffect
copyMove,允許值為"copy"和"move"的dropEffect
linkMove,允許值為"link"和"move"的dropEffect
all,允許任意dropEffect
可拖動
HTML5為所有HTML元素規(guī)定了一個draggable屬性,表示元素是否可以拖動,圖像和鏈接的draggable屬性自動被設(shè)置成了true,而其他元素這個屬性的默認值都是false
其他成員...
HTML5規(guī)范規(guī)定dataTransfer對象還應該包含下列方法和屬性
addElement,為拖動操作添加一個元素,添加這個元素只影響數(shù)據(jù),不會影響拖動操作時頁面元素的外觀
clearData,清除以特定格式保存的數(shù)據(jù)
setDragImage,指定一副圖像,當拖動發(fā)生時,顯示在光標下方。這個方法接收的三個參數(shù)分別是要顯示的HTML元素和光標在圖像中的x、y坐標
types,當前保存的數(shù)據(jù)類型,是一個類似數(shù)組的集合
媒體元素
不用再標簽中指定src屬性,而是像下面這樣使用一個或多個
屬性 事件 自定義媒體播放器
//取得元素的引用 var player = document.getElementById("player"), btn = document.getElementById("video-btn"), curtime = document.getElementById("curtime"), duration = document.getElementById("duration"); //更新播放時間 duration.innerHTML = player.duration; //為按鈕添加事件處理程序 EventUtil.addHandler(btn, "click", function(event){ if (player.paused){ player.play(); btn.value = "Pause"; } else { player.pause(); btn.value = "Play"; } }); //定時更新當前時間 setInterval(function(){ curtime.innerHTML = player.currentTime; }, 250);檢測編碼器的支持情況
var audio = document.getElementById("audio-player"); //很可能"maybe" if (audio.canPlayType("audio/mpeg")){ //進一步處理 } //可能是"probably" if (audio.canPlayType("audio/ogg; codecs="vorbis"")){ //進一步處理 }歷史狀態(tài)管理
通過 hashchange 事件,可以知道 URL 的參數(shù)什么時候發(fā)生了變化,即什么時候該有所反應。而通過狀態(tài)管理 API,能夠在不加載新頁面的情況下改變?yōu)g覽器的 URL。為此,需要使用history.pushState() 方法,該方法可以接收三個參數(shù):狀態(tài)對象、新狀態(tài)的標題和可選的相對 URL。
history.pushState({name:"Nicholas"}, "Nicholas" page", "nicholas.html"); EventUtil.addHandler(window, "popstate", function(event){ var state = event.state; if (state){ //第一個頁面加載時 state 為空 processState(state); } });
文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址:http://specialneedsforspecialkids.com/yun/97941.html
表單腳本 表單的基礎(chǔ)知識 HTMLFormElement有自己獨特的屬性和方法 acceptCharset,服務器能夠處理的字符集,等價于HTML中的accept-charset特性 action,接受請求的URL,等價于HTML中的action特性 elements,表單中所有控件的集合 enctype,請求的編碼類型,等價于HTML中的enctype特性 length,表單中控件的數(shù)量 m...
摘要:操作類名時可以通過屬性添加刪除和替換類名。如果將可選的參數(shù)設(shè)置為,則表示盡量將元素顯示在視口中部垂直方向。將元素的內(nèi)容滾動指定的頁面高度,具體高度由元素的高度決定。 DOM擴展 選擇符API querySelector()方法 querySelector()方法接收一個CSS選擇符,返回與該模式匹配的第一個元素,如果沒有找到匹配的元素,返回null //取得body元素 var b...
摘要:簡介簡史誕生于年,當時主要負責表單的輸入驗證。實現(xiàn)一個完整的由三部分組成核心文檔對象模型瀏覽器對象模型就是對實現(xiàn)該標準規(guī)定的各個方面內(nèi)容的語言的描述。把整個頁面映射為一個多層節(jié)點結(jié)構(gòu)。由萬維網(wǎng)聯(lián)盟規(guī)劃。主要目標是映射文檔的結(jié)構(gòu)。 JavaScript簡介 JavaScript簡史 JavaScript誕生于1995年,當時主要負責表單的輸入驗證。 如果沒有表單驗證的功能,填入信息之...
摘要:能力檢測無法精確地檢測特定的瀏覽器和版本。用戶代理檢測通過檢測用戶代理字符串來識別瀏覽器。用戶代理檢測需要特殊的技巧,特別是要注意會隱瞞其用戶代理字符串的情況。 客戶端檢測 能力檢測 能力檢測的目的不是識別特定的瀏覽器,而是識別瀏覽器的能力,采用這種方式不必顧忌特定的瀏覽器,只要確定瀏覽器支持的特定的能力,就能給出解決方案,檢測基本模式 if(object.propertyInQu...
摘要:基本概念語法區(qū)分大小寫,中的一切變量函數(shù)名和操作符都區(qū)分大小寫。要將一個值轉(zhuǎn)換成對應的值,可以調(diào)用類型包括整數(shù)和浮點數(shù)值,基本數(shù)值字面量格式是十進制整數(shù),除了十進制外還有八進制十六進制。八進制第一位必須是,十六進制第一位必須是。 基本概念 語法 區(qū)分大小寫,ECMAScript中的一切(變量、函數(shù)名和操作符)都區(qū)分大小寫。函數(shù)名不能使用typeof,因為它是一個關(guān)鍵字,但typeOf...
閱讀 3730·2021-09-22 15:49
閱讀 3300·2021-09-08 09:35
閱讀 1422·2019-08-30 15:55
閱讀 2321·2019-08-30 15:44
閱讀 714·2019-08-29 16:59
閱讀 1597·2019-08-29 16:16
閱讀 479·2019-08-28 18:06
閱讀 891·2019-08-27 10:55