html5歷史記錄API的使用方法，在線實(shí)例演示html5歷史記錄API如何使用、瀏覽器的兼容性、語法定義及它的屬性值詳細(xì)資料等。 HTML5歷史記錄API使您可以通過JavaScript訪問瀏覽器導(dǎo)航歷史記錄。HTML5歷史記錄API在單頁Web應(yīng)用程序中非常有用。單頁Web應(yīng)用程序可以使用HTML5歷史記錄API來使應(yīng)用程序中的某個狀態(tài)"可標(biāo)記"。稍后，我將回到如何使用歷史記錄API在單頁應(yīng)用程序中建立可標(biāo)記狀態(tài)。 歷史堆棧瀏覽歷史由一堆URL組成。每次用戶在同一個網(wǎng)站中瀏覽時，新頁面的URL都會放在堆棧的頂部。當(dāng)用戶單擊"后退"按鈕時，堆棧中的指針將移動到堆棧中的上一個元素。如果用戶再次單擊"前進(jìn)"按鈕，則指針將向前移到堆棧上的最頂層元素。如果用戶單擊"后退"，然后單擊新鏈接，則堆棧中最頂層的元素將被新的URL覆蓋。 這是歷史記錄堆棧的示例： http://myapp.com/great-new-story.html http://myapp.com/news.html http://myapp.com 在上述歷史記錄堆棧中訪問的最后一頁是http://myapp.com/great-new-story.html。如果用戶單擊"后退"按鈕，則歷史記錄堆棧中的指針將移回 http://myapp.com/news.html。如果用戶單擊"前進(jìn)"按鈕，則歷史記錄堆棧指針將向前移動http://myapp.com/great-new-story.html，但是如果用戶單擊另一個鏈接(在http://myapp.com/news.html頁面上)，則該鏈接的URL將http://myapp.com/news.html在歷史記錄堆棧中覆蓋 。 HTML5歷史記錄API使Web應(yīng)用程序可以訪問該歷史記錄堆棧。 HTML5歷史記錄API安全限制HTML5歷史記錄API僅允許網(wǎng)頁訪問部分瀏覽歷史記錄，該部分與網(wǎng)頁本身位于同一域中。出于安全原因，歷史記錄API中的此限制是必需的，因此網(wǎng)頁無法查看用戶訪問過哪些其他網(wǎng)站。 同樣，HTML5歷史記錄API不允許網(wǎng)頁將URL推入歷史記錄堆棧中，該URL與網(wǎng)頁的域不在同一域中。該限制確保了當(dāng)用戶開始輸入網(wǎng)頁時，網(wǎng)頁不能假裝已將用戶轉(zhuǎn)發(fā)到例如Paypal并嗅探其用戶名/密碼等。 歷史對象您可以通過history對象訪問瀏覽歷史記錄，該對象在JavaScript中可以作為全局對象使用(實(shí)際上是window.history)。 該history對象包含以下功能-包括歷史記錄API： back() 該back()功能將瀏覽歷史記錄移回到上一個URL。調(diào)用back() 具有與用戶單擊瀏覽器的"后退"按鈕相同的效果。 該forward()功能將瀏覽歷史記錄向前移動到歷史記錄的下一頁。調(diào)用forward()與單擊瀏覽器的"轉(zhuǎn)發(fā)"按鈕具有相同的效果。僅back()在調(diào)用該函數(shù)或單擊"后退"按鈕時才可能。如果歷史記錄已經(jīng)指向?yàn)g覽歷史記錄中的最新URL，則沒有任何前進(jìn)的方向。 該go(index)函數(shù)可以根據(jù)您作為參數(shù)傳遞給該go()函數(shù)的索引來向后或向前移動歷史記錄。如果您go()使用負(fù)索引進(jìn)行調(diào)用(例如go(-1))，則瀏覽器將返回歷史記錄。如果您向go() 函數(shù)傳遞一個正索引，那么瀏覽器將在瀏覽歷史記錄中向前移動(例如go(1))。索引指示歷史記錄中要在瀏覽歷史記錄中前進(jìn)或后退的步驟，例如1,2，-1，-2等。 該pushState(stateObject,url)函數(shù)將新的URL推送到歷史記錄堆棧。該函數(shù)具有三個參數(shù)。該url是推到歷史堆棧的URL。該title 參數(shù)通常被瀏覽器忽略。的stateObject是，當(dāng)一個新的URL被壓入歷史堆棧，將隨著事件傳遞的對象解雇。它stateObject可以包含您想要的任何數(shù)據(jù)。它只是一個JavaScript對象。 該replaceState(stateObject,url)函數(shù)的功能類似于該pushState()函數(shù)，只是它將歷史記錄堆棧中的當(dāng)前元素替換為新的URL。當(dāng)前元素不一定是最重要的元素。這是目前所指向的元件，其可以是在堆棧中的任何元件，如果 back()，forward()和go()功能已經(jīng)被稱為上history 對象。 歷史API示例現(xiàn)在該來看一些有關(guān)如何使用HTML5歷史記錄API的示例。 back()和forward()首先讓我們看看如何使用back()和 forward()函數(shù)在歷史記錄中來回移動： history.back(); history.forward(); 請記住，history對象位于window對象中，因此您還可以編寫： window.history.back(); window.history.forward(); 但是，由于該window對象是默認(rèn)對象，因此可以將其省略。window在本教程的其余部分中，我將忽略該 對象。 請記住，除非您(或用戶)首先移回歷史記錄，否則您無法移入歷史記錄。 go()現(xiàn)在讓我們看看如何使用該go()函數(shù)執(zhí)行類似于back()和 forward()函數(shù)的動作。首先，這是您用來go()向后瀏覽歷史記錄的上一步： history.go(-1); 要向后移動兩步，您可以將-2參數(shù)作為參數(shù)傳遞給go()函數(shù)，如下所示： history.go(-2); 同樣，要使歷史向前發(fā)展，您可以向go()函數(shù)傳遞正索引。這是兩個在歷史上向前推進(jìn)了一步和兩個步驟的示例： history.go(1); history.go(2); 當(dāng)然，如果您同時執(zhí)行了這兩行，則瀏覽歷史記錄將總共向前移動3個步驟。 pushState()要將狀態(tài)推入歷史記錄堆棧，請調(diào)用 對象的pushState()函數(shù)history。這是一個pushState()示例： var state = {};var title = "";
var url = "next-page.html";
history.pushState(state, title, url);本示例將新URL推送到歷史記錄堆棧中。這還將更改瀏覽器的地址字段中的URL，但不會導(dǎo)致瀏覽器嘗試加載該URL。 replaceState()該replaceState()函數(shù)替換了當(dāng)前指向的歷史記錄堆棧中的history元素。如果用戶已使用"后退"按鈕將其移回歷史記錄，則這可能不是最重要的元素。這是一個replaceState()示例： var state = {};
var title = "";
var url = "another-page.html";
history.replaceState(state, url);替換狀態(tài)也將更改瀏覽器的地址字段中的URL，但不會使瀏覽器加載該URL。替換URL的頁面仍保留在瀏覽器中。 瀏覽歷史記錄更改HTML5歷史記錄API使網(wǎng)頁能夠偵聽瀏覽器歷史記錄中的更改。安全限制也適用于此，因此不會向網(wǎng)頁通知導(dǎo)致URL超出網(wǎng)頁域之外的歷史記錄更改。 要偵聽瀏覽器歷史記錄中的更改，請onpopstate在window 對象上設(shè)置偵聽器。這是瀏覽器歷史記錄事件偵聽器示例： window.onpopstate = function(event){
console.log("歷史記錄更改為：" + document.location.href);
}該onpopstate事件處理函數(shù)將被調(diào)用每次在同一頁內(nèi)的瀏覽器歷史記錄更改(瀏覽器的歷史，頁面推送到歷史堆棧)。對歷史更改事件的反應(yīng)可能是從URL提取參數(shù)并將相應(yīng)的內(nèi)容加載到頁面中(例如，通過AJAX)。 注意：只有改變而導(dǎo)致的任何"返回"或"前進(jìn)"按鈕，或相應(yīng)的歷史導(dǎo)航功能 back()，forward()并且go()將導(dǎo)致onpopstate事件偵聽器被調(diào)用。調(diào)用pushState()和replaceState()函數(shù)將不會觸發(fā)歷史記錄更改事件。 在實(shí)踐中使用History API當(dāng)將新的URL推入歷史記錄堆棧時，瀏覽器的地址字段中的URL將更改為新的URL。但是，瀏覽器不會嘗試加載該URL。僅顯示URL并將其推入堆棧，就像瀏覽器已訪問該頁面一樣，但是推送新狀態(tài)的頁面仍保留在瀏覽器中。 將新URL推送到歷史記錄堆棧是一種使單頁應(yīng)用程序(SPA)中的特定狀態(tài)可添加書簽的有用方法。例如，在單頁在線商店中，應(yīng)用程序的URL可能是： http://myshop.com 該應(yīng)用程序可能能夠在同一頁面中向用戶顯示產(chǎn)品，但是用戶如何將指向特定產(chǎn)品的鏈接發(fā)送給朋友？ 解決方案是，當(dāng)加載新產(chǎn)品時，單頁面應(yīng)用將新URL推送到歷史記錄堆棧中。這不會導(dǎo)致新URL的加載，但確實(shí)會使新URL在瀏覽器的地址字段中可見。從這里可以將其添加為書簽或復(fù)制粘貼到電子郵件等中。以下是這種可添加書簽的URL外觀的示例： http://myshop.com?productId=234 或者，也許是一個更具可讀性的URL： http://myshop.com/products/234 或者是一個略多于REST的版本(也提到了產(chǎn)品類型)： http://myshop.com/products/books/234 在將該URL推送到瀏覽歷史記錄之后，Web商店頁面將通過AJAX加載相應(yīng)的產(chǎn)品并將其顯示給用戶。 如果用戶單擊"后退"按鈕，onpopstate則將調(diào)用事件處理程序。然后，網(wǎng)頁應(yīng)查看新的URL是什么，如果URL返回，則加載與該URL對應(yīng)的產(chǎn)品或應(yīng)用程序的首頁http://myshop.com。 這是一個HTML5代碼示例，說明了使用AJAX將數(shù)據(jù)加載到瀏覽器中的原理： <a href="javascript:push('http://myshop.com/books/123');">
Book 123
</a> <br/>
<a href="javascript:push('http://myshop.com/apps/456');">
App 456
</a>
<script>
function loadUrl(url) {
console.log("loading data from url: " + url);
}
function push(url) {
history.pushState(null, null, url);
loadUrl(url);
}
window.onpopstate = function(event) {
console.log("history changed to: " + document.location.href);
loadUrl(document.location.href);
}
</script>本示例包含兩個具有JavaScript Click偵聽器的鏈接。單擊鏈接之一后，相應(yīng)的URL將被推入歷史記錄堆棧，然后加載到瀏覽器中。 該示例還包含一個onpopstate事件偵聽器。當(dāng)用戶單擊"后退"或"前進(jìn)"按鈕時，此事件偵聽器將加載瀏覽器地址字段現(xiàn)在顯示的任何URL。 配置服務(wù)器如果用戶單擊鏈接和"后退" /"前進(jìn)"按鈕，則前面顯示的示例將起作用。但是，如果用戶將URL發(fā)送給朋友或?qū)⑵涮砑訛闀灢⑸院笤L問，該怎么辦？ 如果用戶嘗試訪問加標(biāo)簽的URL，http://myshop.com/books/123則瀏覽器將向Web服務(wù)器請求該URL。Web服務(wù)器需要知道它必須發(fā)送回與從URL發(fā)送回的相同的單頁應(yīng)用程序http://myshop.com。您將需要配置Web服務(wù)器來執(zhí)行此操作。 同樣，單頁Web應(yīng)用程序必須查看首次加載時使用的URL，并使用該URL確定要加載和顯示的內(nèi)容。因此，如果單頁應(yīng)用程序已加載URL，則 myshop.com/books/123該應(yīng)用程序應(yīng)加載相應(yīng)的產(chǎn)品并顯示它。此URL檢查必須在單頁應(yīng)用程序初始化期間進(jìn)行。 瀏覽器對HTML5歷史記錄API的支持在撰寫本文時，除Opera Mini外，所有現(xiàn)代瀏覽器(IE，Safari，Chrome，F(xiàn)irefox)都支持HTML5歷史記錄API。 |
