第 16 、HTML5 腳本編程


目錄

跨文檔信息傳遞



跨文檔消息傳送(cross-document messaging),有時候簡稱為 XDM,指的是在來自不同域的頁面間 傳遞消息。
XDM的核心是 postMessage()方法。在 HTML5規范中,除了 XDM部分之外的其他部分也會提到這個方法名,但都是為了同一個目的:向另一個地方傳遞數據。
postMessage()方法接收兩個參數:一條消息和一個表示消息接收方來自哪個域的字符串。第二 個參數對保障安全通信非常重要,可以防止瀏覽器把消息發送到不安全的地方。

接收到 XDM消息時,會觸發 window 對象的 message 事件。這個事件是以異步形式觸發的,因此 從發送消息到接收消息(觸發接收窗口的 message 事件)可能要經過一段時間的延遲。觸發 message 事件后,傳遞給 onmessage 處理程序的事件對象包含以下三方面的重要信息。

  1. data:作為 postMessage()第一個參數傳入的字符串數據。
  2. origin:發送消息的文檔所在的域,例如”http://www.wrox.com“。
  3. source:發送消息的文檔的 window 對象的代理。這個代理對象主要用於在發送上一條消息的 窗口中調用
    postMessage()方法。如果發送消息的窗口來自同一個域,那這個對象就是 window。


原生拖放


  • 拖放事件
    拖動某元素時,將依次觸發 下列事件:
    1、dragstart
    2、drag
    3、dragend
    當某個元素被拖動到一個有效的放置目標上時,下列事件會依次發生:
    (1) dragenter
    (2) dragover
    (3) dragleave 或 drop

  • 自定義放置目標
    把任何元素變成有效的放置 目標,方法是重寫 dragenter 和 dragover 事件的默認行為。preventDefault(event)

  • dataTransfer 對象
    為了在拖放操作時實現數據交換,IE 5 引入了 dataTransfer 對象。
    dataTransfer 對象有兩個主要方法:getData()setData()。setData()方法的第一個參數,也是 getData()方法唯一的一個參數,是 一個字符串,表示保存的數據類型。

  • dropEffect 與 effectAllowed
    利用 dataTransfer 對象,可不光是能夠傳輸數據,還能通過它來確定被拖動的元素以及作為放 置目標的元素能夠接收什么操作。為此,需要訪問 dataTransfer 對象的兩個屬性:dropEffecteffectAllowed
    通過 dropEffect 屬性可以知道被拖動的元素能夠執行哪種放置行為。這個屬性有下列 4 個可能的值。

    "none":不能把拖動的元素放在這里。這是除文本框之外所有元素的默認值。 
    "move":應該把拖動的元素移動到放置目標。 
    "copy":應該把拖動的元素復制到放置目標。 
    "link":表示放置目標會打開拖動的元素(但拖動的元素必須是一個鏈接,有 URL)。 

    dropEffect 屬性只有搭配 effectAllowed 屬性才有用。
    effectAllowed 屬性表示允許拖動元 素的哪種 dropEffect,effectAllowed 屬性可能的值如下。

    "uninitialized":沒有給被拖動的元素設置任何放置行為。 
    "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元素規定了一個 draggable 屬性,表 示元素是否可以拖動。圖像和鏈接的 draggable 屬性自動被設置成了 true,而其他元素這個屬性 的默認值都是 false。要想讓其他元素可拖動,或者讓圖像或鏈接不能拖動,都可以設置這個屬性。


媒體元素



兩個標簽是 <audio><video>

<!-- 嵌入視頻 --> 
<video src="conference.mpg" id="myVideo">Video player not available.</video> 

<!-- 嵌入音頻 --> 
<audio src="song.mp3" id="myAudio">Audio player not available.</audio> 

這兩個元素至少要在標簽中包含 src 屬性。
因為並非所有瀏覽器都支持所有媒體格式,所以可以指定多個不同的媒體來源。為此,不用在標簽 中指定 src 屬性,而是要像下面這樣使用一或多個元素。

<!-- 嵌入視頻 --> 
<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 player not available. 
</video> 

<!-- 嵌入音頻 --> 
<audio id="myAudio">   
    <source src="song.ogg" type="audio/ogg">   
    <source src="song.mp3" type="audio/mpeg">
   Audio player not available. 
</audio> 
  • 屬性
    其中很多屬性也可以直接在<audio><video>元素中設置。
    這里寫圖片描述
  • 事件
    這里寫圖片描述


歷史狀態管理



HTML5 通過更新 history 對象為管理歷史狀態提供了方便。
通過 hashchange 事件,可以知道 URL的參數什么時候發生了變化,即什么時候該有所反應。而通過狀態管理 API,能夠在不加載新頁面的情況下改變瀏覽器的 URL。為此,需要使用 history.pushState()方法,該方法可以接收三個參數: 狀態對象、新狀態的標題和可選的相對 URL。 例如:

history.pushState({name:"Nicholas"}, "Nicholas' page", "nicholas.html"); 

因為 pushState()會創建新的歷史狀態,所以你會發現“后退”按鈕也能使用了。按下“后退” 按鈕,會觸發 window 對象的 popstate 事件。popstate 事件的事件對象有一個 state 屬性,這個屬性就包含着當初以第一個參數傳遞給 pushState()的狀態對象。
得到這個狀態對象后,必須把頁面重置為狀態對象中的數據表示的狀態(因為瀏覽器不會自動為你做這些)。記住,瀏覽器加載的第一個頁面沒有狀態,因此單擊“后退”按鈕返回瀏覽器加載的第一個 頁面時,event.state 值為 null。 要更新當前狀態,可以調用 replaceState(),傳入的參數與 pushState()的前兩個參數相同。 調用這個方法不會在歷史狀態棧中創建新狀態,只會重寫當前狀態。

在使用HTML5的狀態管理機制時,請確保使用 pushState()創造的每一個“假” URL,在 Web服務器上都有一個真的、實際存在的 URL與之對應。否則,單擊“刷 新”按鈕會導致 404錯誤。

小結

HTML5除了定義了新的標記規則,還定義了一些 JavaScript API。這些 API是為了讓開發人員創建 出更好的、能夠與桌面應用媲美的用戶界面而設計的。本章討論了如下 API。

  1. 跨文檔消息傳遞 API 能夠讓我們在不降低同源策略安全性的前提下,在來自不同域的文檔間傳 遞消息。
  2. 原生拖放功能讓我們可以方便地指定某個元素可拖動,並在操作系統要放置時做出響應。還可 以創建自定義的可拖動元素及放置目標。
  3. 新的媒體元素和擁有自己的與音頻和視頻交互的 API。並非所有瀏覽器支持所 有的媒體格式,因此應該使用canPlayType()檢查瀏覽器是否支持特定的格式。
  4. 歷史狀態管理讓我們不必卸載當前頁面即可修改瀏覽器的歷史狀態棧。有了這種機制,用戶就可以通過“后退”和“前進”按鈕在頁面狀態間切換,而這些狀態完全由 JavaScript進行控制.

注意!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系我们删除。



 
粤ICP备14056181号  © 2014-2020 ITdaan.com