JavaScript HTML5腳本編程——“歷史狀態管理”的注意要點

Rainie 發布于2019-08-19 17:36 / 2725人閱讀

摘要：歷史狀態管理是現代應用開發中的一個難點。通過更新對象為管理歷史狀態提供了方便。而通過狀態管理，能夠在不加載新頁面的情況下改變瀏覽器的。在和中，傳遞給或的狀態對象中不能包含元素。還支持一個屬性，它返回當前狀態的狀態對象。

歷史狀態管理是現代Web應用開發中的一個難點。在現代Web應用中，用戶的每次操作不一定會打開一個全新的頁面，因此“后退”和“前進”按鈕也就失去了作用，導致用戶很難在不同狀態間切換。

要解決這個問題，首選使用

hashchange事件（第13章曾討論過）。HTML5通過更新

history對象為管理歷史狀態提供了方便。

通過hashchange事件，可以知道URL的參數什么時候發生了變化，即什么時候該有所反應。而通過狀態管理API，能夠在不加載新頁面的情況下改變瀏覽器的URL。為此，需要使用

history.pushState()方法，該方法可以接收三個參數：狀態對象、新狀態的標題和可選的相對URL。

例如：

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

執行

pushState()方法后，新的狀態信息就會被加入歷史狀態棧，而瀏覽器地址欄也會變成新的相對URL。

但是，瀏覽器并不會真的向服務器發送請求，即使狀態改變之后查詢location.href也會返回與地址欄中相同的地址。另外，第二個參數目前還沒有瀏覽器實現，因此完全可以只傳入一個空字符串，或者一個短標題也可以。而第一個參數則應該盡可能提供初始化頁面狀態所需的各種信息。

因為pushState()會創建新的歷史狀態，所以你會發現“后退”按鈕也能使用了。按下“后退”按鈕，會觸發window對象的

popstate事件。popstate事件的事件對象有一個

state屬性，這個屬性就包含著當初以第一個參數傳遞給pushState()的狀態對象。

如：

EventUtil.addHandler(window, "popstate", function(event){
    var state = event.state;
    if (state){   //第一個頁面加載時state為空
        processState(state);
    }
});

得到這個狀態對象后，必須把頁面重置為狀態對象中的數據表示的狀態（因為瀏覽器不會自動為你做這些）。記住，瀏覽器加載的第一個頁面沒有狀態，因此單擊“后退”按鈕返回瀏覽器加載的第一個頁面時，event.state值為null。

要更新當前狀態，可以調用

replaceState()，傳入的參數與pushState()的前兩個參數相同。調用這個方法不會在歷史狀態棧中創建新狀態，只會重寫當前狀態。

如：

history.replaceState({name:"Greg"}, "Greg"s page");

支持HTML5歷史狀態管理的瀏覽器有Firefox 4+、Safari 5+、Opera 11.5+和Chrome。在Safari和Chrome中，傳遞給pushState()或replaceState()的狀態對象中不能包含DOM元素。而Firefox支持在狀態對象中包含DOM元素。Opera還支持一個history.state屬性，它返回當前狀態的狀態對象。

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/78687.html

JavaScript HTML5腳本編程——“跨文檔消息傳遞”的注意要點

摘要：跨文檔消息傳送，有時候也簡稱為，指的是來自不同域的頁面間傳遞消息。接收到消息時，會觸發對象的事件。接受到消息后驗證發送窗口的來源是至關重要的。基本的檢測模式如下。跨文檔消息傳送（cross-document messaging），有時候也簡稱為XDM，指的是來自不同域的頁面間傳遞消息。例如，www.wrox.com域中的一個頁面與一個位于內嵌框架中的p2p.wrox.com域中的頁面...

TerryCai 2019-08-19 17:33 評論0 收藏0
JavaScript HTML5腳本編程——“媒體元素”的注意要點

摘要：事件除了大量屬性之外，這兩個媒體元素還可以觸發很多事件。下表列出了媒體元素相關的事件。這兩個媒體元素都有一個方法，該方法接收一種格式編解碼器字符串，返回或空字符串。 audio和video元素的用法如下：不支持音頻不支持視頻因為并非所有瀏覽器都支持所有媒體格式，所以可以指定多個不同的媒體來源。為此，不用在標簽中指定src屬性，而是要像下面這樣使用一或多個元素。 ...

baoxl 2019-08-19 17:37 評論0 收藏0
JavaScript HTML5腳本編程——“原生拖放”的注意要點

摘要：在中，唯一有效的放置目標是文本框。以的實例為基礎指定了拖放規范。觸發事件后，隨即會觸發事件，而且在元素被拖動期間會持續發送該事件。指定一副圖像，當拖動發生時，顯示在光標下方。最早在網頁中引入JavaScript拖放功能是IE4。當時，網頁中只有兩種對象可以拖放：圖像和某些文本。在IE4中，唯一有效的放置目標是文本框。到了IE5，拖放功能得到拓展，添加了新的事件，而且幾乎網頁中的任何元...

forsigner 2019-08-19 17:35 評論0 收藏0