【移動應(yīng)用開發(fā)技術(shù)】HTML5新特性【pushState】和replaceSt

【移動應(yīng)用開發(fā)技術(shù)】HTML5新特性【pushState】和【replaceSt

近來在處理瀏覽器禁刷功能時，用到一個新屬性：history.pushState()；官方解釋如下:history.pushState()方法和history.replaceState()方法，它們允許你逐條地添加和修改歷史記錄條目。這些方法可以協(xié)同window.onpopstate事件一起工作。使用history.pushState()會改變referrer的值，而在你調(diào)用方法后創(chuàng)建的

XMLHttpRequest

對象會在HTTP請求頭中使用這個值。referrer的值則是創(chuàng)建

XMLHttpRequest

對象時所處的窗口的URL。首先附上一個實例功能：

//防止瀏覽器后退功能

$(document).ready(function(e)

{

var

url

=

window.location.href;

var

last

=

url.substring(url.lastIndexOf("/"));

if

(window.history

&&

window.history.pushState)

{

$(window).on('popstate',

function

()

{

//在IE中必須得有這兩行

window.history.pushState('forward',

null,

url);

window.history.forward(1);

});

}

//屏蔽鼠標(biāo)右鍵

$(document).bind("contextmenu",function(e){

return

false;

});

//屏蔽f5和回車功能

$(document).bind("keydown",function(e){

if

(event.keyCode==116)

{

event.keyCode

=

0;

event.cancelBubble

=

true;

return

false;

}

});

});以及附上【pushState】和【replaceState】的基礎(chǔ)語法區(qū)別：history.pushState(state,title,url)

將當(dāng)前URL和history.state加入到history中，并用新的state和URL替換當(dāng)前。不會造成頁面刷新。

state：與要跳轉(zhuǎn)到的URL對應(yīng)的狀態(tài)信息。

title：可以不傳

url：要跳轉(zhuǎn)到的URL地址，不能跨域。

history.replaceState(state,title,url)

用新的state和URL替換當(dāng)前。不會造成頁面刷新。

state：與要跳轉(zhuǎn)到的URL對應(yīng)的狀態(tài)信息。

title：可以不傳

url：要跳轉(zhuǎn)到的URL地址，不能跨域。最大區(qū)別則在于：pushState是添加歷史記錄的，而replaceState是不添加的。接下來開始講解兩者之間的語法分析：1、實例假設(shè)

/foo.html

將執(zhí)行如下JavaScript代碼：var

stateObj

=

{

foo:

"bar"

};

history.pushState(stateObj,

"page

2",

"bar.html");這將讓瀏覽器的地址欄顯示/bar.html，但不會加載bar.html頁面也不會檢查bar.html是否存在。假設(shè)現(xiàn)在用戶導(dǎo)航到了，然后點擊了后退按鈕，此時，地址欄將會顯示/bar.html，并且頁面會觸發(fā)popstate事件，該事件中的狀態(tài)對象（stateobject）包含stateObj的一個拷貝。該頁面看起來像foo.html，盡管頁面內(nèi)容可能在popstate事件中被修改。如果我們再次點擊后退按鈕，URL將變回/foo.html，文檔將觸發(fā)另一個popstate事件，這次的狀態(tài)對象為null?；赝送瑯硬粫淖兾臋n內(nèi)容。2、pushState()方法：添加和修改歷史記錄條目①語法：history.pushState(state,

title,

url);pushState()有三個參數(shù)：一個狀態(tài)對象、一個標(biāo)題（現(xiàn)在會被忽略），一個可選的URL地址。下面來單獨考察這三個參數(shù)的細(xì)節(jié)：狀態(tài)對象（stateobject）

—一個JavaScript對象，與用pushState()方法創(chuàng)建的新歷史記錄條目關(guān)聯(lián)。無論何時用戶導(dǎo)航到新創(chuàng)建的狀態(tài)，popstate事件都會被觸發(fā)，并且事件對象的state屬性都包含歷史記錄條目的狀態(tài)對象的拷貝。任何可序列化的對象都可以被當(dāng)做狀態(tài)對象。因為FireFox瀏覽器會把狀態(tài)對象保存到用戶的硬盤，這樣它們就能在用戶重啟瀏覽器之后被還原，我們強行限制狀態(tài)對象的大小為640k。如果你向pushState()方法傳遞了一個超過該限額的狀態(tài)對象，該方法會拋出異常。如果你需要存儲很大的數(shù)據(jù)，建議使用sessionStorage或localStorage。標(biāo)題（title）

—FireFox瀏覽器目前會忽略該參數(shù)，雖然以后可能會用上?？紤]到未來可能會對該方法進(jìn)行修改，傳一個空字符串會比較安全?；蛘撸阋部梢詡魅胍粋€簡短的標(biāo)題，標(biāo)明將要進(jìn)入的狀態(tài)。地址（URL）

—新的歷史記錄條目的地址。瀏覽器不會在調(diào)用pushState()方法后加載該地址，但之后，可能會試圖加載，例如用戶重啟瀏覽器。新的URL不一定是絕對路徑；如果是相對路徑，它將以當(dāng)前URL為基準(zhǔn)；傳入的URL與當(dāng)前URL應(yīng)該是同源的，否則，pushState()會拋出異常。該參數(shù)是可選的；不指定的話則為文檔當(dāng)前URL。②樣例創(chuàng)建了一個新的由

state,

title,和

url設(shè)定的瀏覽器歷史紀(jì)錄.var

state

=

{

'page_id':

1,

'user_id':

5

};

var

title

=

'Hello

World';

var

url

=

'hello-world.html';

history.pushState(state,

title,

url);③優(yōu)勢某種意義上，調(diào)用pushState()有點類似于設(shè)置window.location='#foo'，它們都會在當(dāng)前文檔內(nèi)創(chuàng)建和激活新的歷史記錄條目。但pushState()有自己的優(yōu)勢：新的URL可以是任意的同源URL，與此相反，使用window.location方法時，只有僅修改hash才能保證停留在相同的document中。根據(jù)個人需要來決定是否修改URL。相反，設(shè)置window.location='#foo'，只有在當(dāng)前hash值不是foo時才創(chuàng)建一條新歷史記錄。你可以在新的歷史記錄條目中添加抽象數(shù)據(jù)。如果使用基于hash的方法，你只能把相關(guān)數(shù)據(jù)轉(zhuǎn)碼成一個很短的字符串。注意：pushState()方法永遠(yuǎn)不會觸發(fā)hashchange事件，即便新的地址只變更了hash。3、replaceState()方法：修改瀏覽器當(dāng)前歷史記錄條目history.replaceState()操作類似于history.pushState()，不同之處在于replaceState()方法會修改當(dāng)前歷史記錄條目而并非創(chuàng)建新的條目。當(dāng)你為了響應(yīng)用戶的某些操作，而要更新當(dāng)前歷史記錄條目的狀態(tài)對象或URL時，使用replaceState()方法會特別合適。4、popstate事件每當(dāng)激活的歷史記錄發(fā)生變化時，都會觸發(fā)popstate事件。如果被激活的歷史記錄條目是由pushState所創(chuàng)建，或是被replaceState方法影響到的，popstate事件的狀態(tài)屬性將包含歷史記錄的狀態(tài)對象的一個拷貝。調(diào)用history.pushState()或者h(yuǎn)istory.replaceState()不會觸發(fā)popstate事件.

popstate事件只會在其他瀏覽器操作時觸發(fā),比如點擊后退按鈕(或者在JavaScript中調(diào)用history.back()方法).當(dāng)網(wǎng)頁加載時,各瀏覽器對popstate事件是否觸發(fā)有不同的表現(xiàn),Chrome和Safari會觸發(fā)popstate事件,而Firefox不會.①語法funcRef

是個函數(shù)名.②實例假如當(dāng)前網(wǎng)頁地址為/example.html,則運行下述代碼后:window.onpopstate

=

function

(event)

{

alert("location:

"

+

document.location

+

",

state:

"

+

JSON.stringify(event.state));

};

//綁定事件處理函數(shù).

history.pushState({page:

1},

"title

1",

"?page=1");

//添加并激活一個歷史記錄條目

/example.html?page=1,條目索引為1

history.pushState({page:

2},

"title

2",

"?page=2");

//添加并激活一個歷史記錄條目

/example.html?page=2,條目索引為2

history.replaceState({page:

3},

"title

3",

"?page=3");

//修改當(dāng)前激活的歷史記錄條目

http://ex..?page=2

變?yōu)?/p>

http://ex..?page=3,條目索引為3

history.back();

//

彈出

"location:

/example.html?page=1,

state:

{"page":1}"

history.back();

//

彈出

"location:

/example.html,

state:

null

history.go(2);

//

彈出

"location:

/example.html?page=3,

state:

{"page":3}即便進(jìn)入了那些非pushState和replaceState方法作用過的(比如/example.html)沒有state對象關(guān)聯(lián)的那些網(wǎng)頁,

popstate事件也仍然會被觸發(fā).5、讀取當(dāng)前狀態(tài)在頁面加載時，可能會包含一個非空的狀態(tài)對象。這種情況是會發(fā)生的，例如，如果頁面中使用pushState()或replaceState