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