history詳解及實例應用

時間 2019-12-07

標籤 history 詳解實例應用简体版

原文原文鏈接

DOM中的window對象經過window.history方法提供了對瀏覽器歷史記錄的讀取，讓你能夠在用戶的訪問記錄中前進和後退。javascript

一，history簡介

History 對象包含用戶（在瀏覽器窗口中）訪問過的 URL。php

History 對象是 window 對象的一部分，可經過 window.history 屬性對其進行訪問。html

注意：沒有應用於History對象的公開標準，不過全部瀏覽器都支持該對象。java

History 對象屬性

屬性	說明
length	返回歷史列表中的網址數，經過檢查瀏覽器歷史記錄的length屬性來找到歷史記錄堆棧中的頁面總數

History 對象方法

使用back(),forward(),和go()方法能夠在用戶的歷史記錄中前進、後退、移動到歷史記錄中特定的位置node

方法	說明
back()	加載 history 列表中的前一個 URL，像用戶點擊了瀏覽器工具欄上的返回鍵同樣
forward()	加載 history 列表中的下一個 URL
go()	加載 history 列表中的某個具體頁面，使用go()方法從session歷史中載入特定的頁面，注意:IE支持向go()方法傳URL參數

History 添加修改實體方法

HTML5引入history.pushState()和history.replaceState()方法，添加和修改history實體。同時，這些方法會和window.onpostate事件一塊兒工做。瀏覽器

方法	說明
pushState()	向 history 添加當前頁面的記錄
replaceState()	history.replaceState() 用起來很像pushState()，除了replaceState()是用來修改當前的history實體而不是建立一個新的。這個方法有時會頗有用，當你須要對某些用戶行爲做反應而更新一個state對象或者當前history實體時，可使用它來更新state對象或者當前history實體的url。

pushState()有三個參數:state對象，標題(如今是被忽略，未做處理)，URL(可選)。具體細節：安全

· state對象 –state對象是一個JavaScript對象，它關係到由pushState()方法建立出來的新的history實體。用以存儲關於你所要插入到歷史記錄的條目的相關信息。State對象能夠是任何Json字符串。由於firefox會使用用戶的硬盤來存取state對象，這個對象的最大存儲空間爲640k。若是大於這個數值，則pushState()方法會拋出一個異常。若是確實須要更多的空間來存儲，請使用本地存儲。服務器

· title—firefox如今回忽略這個參數，雖然它可能未來會被使用上。而如今最安全的使用方式是傳一個空字符串，以防止未來的修改。或者能夠傳一個簡短的標題來表示statesession

· URL—這個參數用來傳遞新的history實體的URL，注意瀏覽器將不會在調用pushState()方法後加載這個URL。但也許會過一會嘗試加載這個URL。好比在用戶重啓了瀏覽器後，新的url能夠不是絕對路徑。若是是相對路徑，那麼它會相對於現有的url。新的url必須和現有的url同域，不然pushState()將拋出異常。這個參數是選填的，若是爲空，則會被置爲document當前的url。app

某種意義上來講，調用pushState()方法很像設置了window.location = 「#foo」,這二者都會建立和激活另外一個關聯到當前document的history實體，但pushState()另外有一些優勢：

l 新的url能夠是任何和當前url同域的url，相比之下，若是隻設置hash，window.location會保持在同一個document。

l 若是不須要，你能夠不修改url。對比而言，設置window.location = 「#foo」;僅產生新的history實體，若是你當前的hash不是#foo

l 你能夠將任意的數據與你的新history實體關聯。使用基於hash的方法，須要將全部相關的數據編碼爲一個短字符串。

注意，pushState()方法不會使hashchange時間發生，即便是新舊url只是hash不一樣。

例子

假設http://***/foo.html頁面執行了一下JS

var stateObj = { foo: "bar" };

history.pushState(stateObj, "page 2", "bar.html");

這種方法將會使url地址欄顯示http://***/bar.html，但瀏覽器不會加載bar.html頁面，即便這個頁面存在也不會加載。

History 事件

當history實體被改變時，popstate事件將會發生。若是history實體是有pushState和replaceState方法產生的，popstate事件的state屬性會包含一份來自history實體的state對象的拷貝

方法	說明
popstate	向詳見window.onpopstate

二，實例及問題

描述：A頁面基本信息頁，包含上傳按鈕點擊進入B頁面，B頁面上傳操做成功會回退到A頁面，須要考慮問題，1：iframe實現圖片異步上傳，具體參見代碼，2：使用history.pushState()和popstate事件實現AJAX的前進、後退功能，3：window內iframe使用state各瀏覽器兼容問題。

main.html：

<html>
<head>
<title></title>
</head>
<body>
<!-- A頁面-->
<article node-type="basic_block">
    <a href="javascript:void(0);" node-type="pic_a" action-type="pic_a">選擇圖片</a>
</article>

<!-- B頁面-->
<article node-type="upload_block"  class="hid">
    <span>上傳圖片</span>
    <form id="pic_form" node-type="pic_form" target="pic_iframe" action="http://picupload.php?" method="POST">
        <input type="file"  node-type="pic_input">
    </form>
    <iframe frameborder="0"   class="hid"  id="pic_iframe" name="pic_iframe" src="about:blank"></iframe>
</article>
<script type="application/javascript" src="main.js"></script>
</body>
</html>

picupload.php:

//處理上傳，得到上傳後的img_path地址，省略

$this->display('picupload.html', array('img_path' => $img_path));

picupload.html：

<html>
<head>
<title></title>  
<script type="text/javascript"> 
if(window.parent){
	window.parent.addImgSuccess(img_path);
}
</script>
</head>
<body>
</body>
</html>

main.js：

var org_index = 0;

//"返回"觸發事件,settimeout防止有些瀏覽器首次加載時觸犯popstate
window.addEventListener('load', function() {
     setTimeout(function() {
          window.addEventListener('popstate', function() {
$('article').addClass('hid');
           	$('[node-type="basic_block"]').removeClass('hid');
           });
      }, 0);
});
$('[node-type="pic_a"]').tap(function(){ 
$('[node-type="basic_block"]').addClass('hid');
        $('[node-type="upload_block"]').removeClass('hid');
        var state = history.state;
        history.pushState(state, null, window.location+'#upload');
        org_index = history.length;
 });
$('[node-type="pic_input"]').change(function(){ addPic(); });

//上傳控件執行觸發form提交
addPic : function() {
    $("#pic_form").submit();
},

//上傳頭像成功
addImgSuccess : function(img_path, data) {
    //兼容不一樣瀏覽器，一些瀏覽器加載window對象時會push新的state,history.length會增長
    var go_index = org_index - history.length - 1;
    history.go(go_index);
},

頁面原型：

三，問題分析

1，iframe實現圖片異步上傳

原理：將圖片上傳的頁面放在iframe中，這樣就能夠在iframe中將圖片提交到服務器而不須要頁面刷新，提交成功後用腳本實現回到主頁面並顯示上傳的圖片。

2，頁面初次加載state對象各瀏覽器兼容問題

當頁面加載時，它可能會有一個非空的state對象，這可能發生在當頁面設置一個state對象(使用pushState或者replaceState)以後用戶重啓了瀏覽器。當頁面從新加載，頁面將收到onload事件，但不會有popstate事件。然而，若是你讀取history.state屬性，將在popstate事件發生後獲得這個state對象，因此在"返回"觸發事件，使用settimeout防止有些瀏覽器首次加載時觸犯popstate

3，window內iframe使用state各瀏覽器兼容問題

不一樣瀏覽器對iframe中history操做不同，如Firefox執行history.back/go(-1)是iframe內後退，而Chrome是父頁面後退，咱們這裏是須要實現父頁面回退，根據state變化動態獲取須要回退的步數：

var go_index = org_index - history.length - 1;

history.go(go_index);

頁能夠根據不一樣的瀏覽器判斷，不過須要對瀏覽器一一瞭解，不推薦，以下：

var explorer =navigator.userAgent;
var str = JSON.stringify(window.location);
//ie 
if (explorer.indexOf("MSIE") >= 0) {
   history.go(-1);
}
//firefox 
else if (explorer.indexOf("Firefox") >= 0) {
    history.go(-2);
}
//Chrome
else if (explorer.indexOf("Chrome") >= 0) {
}
//Opera
else if (explorer.indexOf("Opera") >= 0) {}
//Safari
else if (explorer.indexOf("Safari") >= 0) {} 
//Netscape
else if (explorer.indexOf("Netscape")>= 0) {}

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。