資訊專欄INFORMATION COLUMN
摘要：歷史狀態(tài)管理是現(xiàn)代應(yīng)用開發(fā)中的一個難點。通過更新對象為管理歷史狀態(tài)提供了方便。而通過狀態(tài)管理，能夠在不加載新頁面的情況下改變?yōu)g覽器的。在和中，傳遞給或的狀態(tài)對象中不能包含元素。還支持一個屬性，它返回當(dāng)前狀態(tài)的狀態(tài)對象。
歷史狀態(tài)管理是現(xiàn)代Web應(yīng)用開發(fā)中的一個難點。在現(xiàn)代Web應(yīng)用中，用戶的每次操作不一定會打開一個全新的頁面，因此“后退”和“前進”按鈕也就失去了作用，導(dǎo)致用戶很難在不同狀態(tài)間切換。
要解決這個問題，首選使用
hashchange事件（第13章曾討論過）。HTML5通過更新
history對象為管理歷史狀態(tài)提供了方便。
通過hashchange事件，可以知道URL的參數(shù)什么時候發(fā)生了變化，即什么時候該有所反應(yīng)。而通過狀態(tài)管理API，能夠在不加載新頁面的情況下改變?yōu)g覽器的URL。為此，需要使用
history.pushState()方法，該方法可以接收三個參數(shù)：狀態(tài)對象、新狀態(tài)的標(biāo)題和可選的相對URL。
例如：
history.pushState({name:"Nicholas"}, "Nicholas" page", "nicholas.html");
執(zhí)行
pushState()方法后，新的狀態(tài)信息就會被加入歷史狀態(tài)棧，而瀏覽器地址欄也會變成新的相對URL。
但是，瀏覽器并不會真的向服務(wù)器發(fā)送請求，即使?fàn)顟B(tài)改變之后查詢location.href也會返回與地址欄中相同的地址。另外，第二個參數(shù)目前還沒有瀏覽器實現(xiàn)，因此完全可以只傳入一個空字符串，或者一個短標(biāo)題也可以。而第一個參數(shù)則應(yīng)該盡可能提供初始化頁面狀態(tài)所需的各種信息。
因為pushState()會創(chuàng)建新的歷史狀態(tài)，所以你會發(fā)現(xiàn)“后退”按鈕也能使用了。按下“后退”按鈕，會觸發(fā)window對象的
popstate事件 。popstate事件的事件對象有一個
state屬性，這個屬性就包含著當(dāng)初以第一個參數(shù)傳遞給pushState()的狀態(tài)對象。
如：
EventUtil.addHandler(window, "popstate", function(event){
var state = event.state;
if (state){ //第一個頁面加載時state為空
processState(state);
}
});
得到這個狀態(tài)對象后，必須把頁面重置為狀態(tài)對象中的數(shù)據(jù)表示的狀態(tài)（因為瀏覽器不會自動為你做這些）。記住，瀏覽器加載的第一個頁面沒有狀態(tài)，因此單擊“后退”按鈕返回瀏覽器加載的第一個頁面時，event.state值為null。
要更新當(dāng)前狀態(tài)，可以調(diào)用
replaceState()，傳入的參數(shù)與pushState()的前兩個參數(shù)相同。調(diào)用這個方法不會在歷史狀態(tài)棧中創(chuàng)建新狀態(tài)，只會重寫當(dāng)前狀態(tài)。
如：
history.replaceState({name:"Greg"}, "Greg"s page");
支持HTML5歷史狀態(tài)管理的瀏覽器有Firefox 4+、Safari 5+、Opera 11.5+和Chrome。在Safari和Chrome中，傳遞給pushState()或replaceState()的狀態(tài)對象中不能包含DOM元素。而Firefox支持在狀態(tài)對象中包含DOM元素。Opera還支持一個history.state屬性，它返回當(dāng)前狀態(tài)的狀態(tài)對象。
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/78687.html
摘要：跨文檔消息傳送，有時候也簡稱為，指的是來自不同域的頁面間傳遞消息。接收到消息時，會觸發(fā)對象的事件。接受到消息后驗證發(fā)送窗口的來源是至關(guān)重要的。基本的檢測模式如下。 跨文檔消息傳送（cross-document messaging），有時候也簡稱為XDM，指的是來自不同域的頁面間傳遞消息。例如，www.wrox.com域中的一個頁面與一個位于內(nèi)嵌框架中的p2p.wrox.com域中的頁面...
摘要：事件除了大量屬性之外，這兩個媒體元素還可以觸發(fā)很多事件。下表列出了媒體元素相關(guān)的事件。這兩個媒體元素都有一個方法，該方法接收一種格式編解碼器字符串，返回或空字符串。 audio和video元素的用法如下： 不支持音頻 不支持視頻 因為并非所有瀏覽器都支持所有媒體格式，所以可以指定多個不同的媒體來源。為此，不用在標(biāo)簽中指定src屬性，而是要像下面這樣使用一或多個元素。 ...
摘要：在中，唯一有效的放置目標(biāo)是文本框。以的實例為基礎(chǔ)指定了拖放規(guī)范。觸發(fā)事件后，隨即會觸發(fā)事件，而且在元素被拖動期間會持續(xù)發(fā)送該事件。指定一副圖像，當(dāng)拖動發(fā)生時，顯示在光標(biāo)下方。 最早在網(wǎng)頁中引入JavaScript拖放功能是IE4。當(dāng)時，網(wǎng)頁中只有兩種對象可以拖放：圖像和某些文本。在IE4中，唯一有效的放置目標(biāo)是文本框。到了IE5，拖放功能得到拓展，添加了新的事件，而且?guī)缀蹙W(wǎng)頁中的任何元...
閱讀 3549·2021-11-18 10:02
閱讀 3118·2019-08-29 18:34
閱讀 3404·2019-08-29 17:00
閱讀 437·2019-08-29 12:35
閱讀 764·2019-08-28 18:22
閱讀 1944·2019-08-26 13:58
閱讀 1678·2019-08-26 10:39
閱讀 2683·2019-08-26 10:11
