2019-11-24

學(xué)習(xí)JavaScript第十六章

1:跨文檔信息傳遞

跨文檔信息傳遞又被稱為XDM,其核心方法是postMessage()方法。
postMessage()方法接收兩個參數(shù)
一條信息一條表示信息接收方來自哪個域的字符串

2:原生拖放

16.2.1拖動事件

1:拖動某元素時,將依次觸發(fā)下列事件:

dragstart
drag
dragend
當(dāng)某個元素被拖動到某個有效的位置目標(biāo)上時,將依次觸發(fā)下列事件:
1:dragenter
2:dragover
3:dragleave或drop

16.2.2自定義放置目標(biāo)

當(dāng)拖動元素經(jīng)過不允許放置的目標(biāo)時,不會發(fā)生drop事件。不過你可以重寫dragenter和dragover事件的默認(rèn)行為,把任何元素變成有效的放置元素。

16.2.3dataTransfer對象

dataTransfer()對象用于從被拖動目標(biāo)向所放置目標(biāo)傳遞字符串格式的數(shù)據(jù)
dataTransfer()對象有兩種方法:
getData()setData()
getData()方法可以取得由setData方法保存的值。

16.2.4dropEffect與effectAllowed

通過dropEffect屬性可以知道被拖動元素能執(zhí)行哪種放置行為。
dropEffect屬性只有搭配effectAllowed屬性才能才能用。effectAllowed元素表示允許拖動元素的哪種dropEffect

16.2.5可拖動

draggable屬性可表示元素是否可以拖動

媒體元素

<audio>和<video>標(biāo)簽可讓開發(fā)人員不必依賴任何插件就能在網(wǎng)頁中嵌入瀏覽器的音頻和視頻內(nèi)容。

<audio> 標(biāo)簽屬性:

src:音樂的URL
preload:預(yù)加載
autoplay:自動播放
loop:循環(huán)播放
controls:瀏覽器自帶的控制

<video> 標(biāo)簽屬性:

src:視頻的URL
poster:視頻封面,沒有播放時顯示的圖片
preload:預(yù)加載
autoplay:自動播放
loop:循環(huán)播放
controls:瀏覽器自帶的控制條
width:視頻寬度
height:視頻高度

1:使用<audio>和<video>標(biāo)簽的play()和pause()方法,可手動控制媒體文件的播放
2:兩個元素都由canPlayType()方法,該方法接收一種格式/編解碼器字符串。返回值是"probably","maybe"或" "(空字符串)??兆址莊alse值,因此可這樣使用canPlayType();

if(audio.cnaPlayType("audio/mpeg")){
//進(jìn)一步處理
}

"probably"和"maybe"都是真值,因此可在if語句的條件測試中轉(zhuǎn)換為true。

16.4歷史狀態(tài)管理

通過hashchange事件,可以監(jiān)聽URL參數(shù)(#后面的字符串)什么時候發(fā)生變化。
history.pushState()方法可接收三個參數(shù):狀態(tài)對象,新狀態(tài)的標(biāo)題和可選的相對URL。

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容