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