成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲 中文字幕 日韩 无码

資訊專欄INFORMATION COLUMN

JavaScript HTML5腳本編程——“歷史狀態(tài)管理”的注意要點(diǎn)

Rainie / 2775人閱讀

摘要：歷史狀態(tài)管理是現(xiàn)代應(yīng)用開發(fā)中的一個(gè)難點(diǎn)。通過更新對(duì)象為管理歷史狀態(tài)提供了方便。而通過狀態(tài)管理，能夠在不加載新頁面的情況下改變?yōu)g覽器的。在和中，傳遞給或的狀態(tài)對(duì)象中不能包含元素。還支持一個(gè)屬性，它返回當(dāng)前狀態(tài)的狀態(tài)對(duì)象。

歷史狀態(tài)管理是現(xiàn)代Web應(yīng)用開發(fā)中的一個(gè)難點(diǎn)。在現(xiàn)代Web應(yīng)用中，用戶的每次操作不一定會(huì)打開一個(gè)全新的頁面，因此“后退”和“前進(jìn)”按鈕也就失去了作用，導(dǎo)致用戶很難在不同狀態(tài)間切換。

要解決這個(gè)問題，首選使用

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

history對(duì)象為管理歷史狀態(tài)提供了方便。

通過hashchange事件，可以知道URL的參數(shù)什么時(shí)候發(fā)生了變化，即什么時(shí)候該有所反應(yīng)。而通過狀態(tài)管理API，能夠在不加載新頁面的情況下改變?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");

執(zhí)行

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

但是，瀏覽器并不會(huì)真的向服務(wù)器發(fā)送請(qǐng)求，即使?fàn)顟B(tài)改變之后查詢location.href也會(huì)返回與地址欄中相同的地址。另外，第二個(gè)參數(shù)目前還沒有瀏覽器實(shí)現(xiàn)，因此完全可以只傳入一個(gè)空字符串，或者一個(gè)短標(biāo)題也可以。而第一個(gè)參數(shù)則應(yīng)該盡可能提供初始化頁面狀態(tài)所需的各種信息。

因?yàn)閜ushState()會(huì)創(chuàng)建新的歷史狀態(tài)，所以你會(huì)發(fā)現(xiàn)“后退”按鈕也能使用了。按下“后退”按鈕，會(huì)觸發(fā)window對(duì)象的

popstate事件 。popstate事件的事件對(duì)象有一個(gè)

state屬性，這個(gè)屬性就包含著當(dāng)初以第一個(gè)參數(shù)傳遞給pushState()的狀態(tài)對(duì)象。

如：

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

得到這個(gè)狀態(tài)對(duì)象后，必須把頁面重置為狀態(tài)對(duì)象中的數(shù)據(jù)表示的狀態(tài)（因?yàn)闉g覽器不會(huì)自動(dòng)為你做這些）。記住，瀏覽器加載的第一個(gè)頁面沒有狀態(tài)，因此單擊“后退”按鈕返回瀏覽器加載的第一個(gè)頁面時(shí)，event.state值為null。

要更新當(dāng)前狀態(tài)，可以調(diào)用

replaceState()，傳入的參數(shù)與pushState()的前兩個(gè)參數(shù)相同。調(diào)用這個(gè)方法不會(huì)在歷史狀態(tài)棧中創(chuàng)建新狀態(tài)，只會(huì)重寫當(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)對(duì)象中不能包含DOM元素。而Firefox支持在狀態(tài)對(duì)象中包含DOM元素。Opera還支持一個(gè)history.state屬性，它返回當(dāng)前狀態(tài)的狀態(tài)對(duì)象。

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/78687.html

相關(guān)文章

  • JavaScript HTML5腳本編程——“跨文檔消息傳遞”的注意要點(diǎn)

    摘要：跨文檔消息傳送，有時(shí)候也簡(jiǎn)稱為，指的是來自不同域的頁面間傳遞消息。接收到消息時(shí)，會(huì)觸發(fā)對(duì)象的事件。接受到消息后驗(yàn)證發(fā)送窗口的來源是至關(guān)重要的?；镜臋z測(cè)模式如下。 跨文檔消息傳送（cross-document messaging），有時(shí)候也簡(jiǎn)稱為XDM，指的是來自不同域的頁面間傳遞消息。例如，www.wrox.com域中的一個(gè)頁面與一個(gè)位于內(nèi)嵌框架中的p2p.wrox.com域中的頁面...

    TerryCai 評(píng)論0 收藏0

  • JavaScript HTML5腳本編程——“媒體元素”的注意要點(diǎn)

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

    baoxl 評(píng)論0 收藏0

  • JavaScript HTML5腳本編程——“原生拖放”的注意要點(diǎn)

    摘要：在中，唯一有效的放置目標(biāo)是文本框。以的實(shí)例為基礎(chǔ)指定了拖放規(guī)范。觸發(fā)事件后，隨即會(huì)觸發(fā)事件，而且在元素被拖動(dòng)期間會(huì)持續(xù)發(fā)送該事件。指定一副圖像，當(dāng)拖動(dòng)發(fā)生時(shí)，顯示在光標(biāo)下方。 最早在網(wǎng)頁中引入JavaScript拖放功能是IE4。當(dāng)時(shí)，網(wǎng)頁中只有兩種對(duì)象可以拖放：圖像和某些文本。在IE4中，唯一有效的放置目標(biāo)是文本框。到了IE5，拖放功能得到拓展，添加了新的事件，而且?guī)缀蹙W(wǎng)頁中的任何元...

    forsigner 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

閱讀需要支付1元查看
<