如何控制瀏覽器的歷史記錄

阿新 • • 發佈：2019-01-14

提醒：本文最後更新於 3779 天前，文中所描述的資訊可能已發生改變，請謹慎使用。

上次一位網友在我blog留言問到如何修正Ajax後退失效，這是在開發Ajax應用時很常見的需求。這篇文章就簡單的介紹一下怎麼解決這個問題。

首先我們要清楚後退按鈕會失效的原因：使用Ajax時，頁面通過XMLHttpRequest來更新內容，並沒有Redirect，所以瀏覽器不會出現前進後退。這也是Ajax剛出來時遭到很多人批判的一個原因，其中細節可以參考這兩篇文章《Ajax: 99% Bad》、《AJAX的七宗罪》。這個問題其實跟Ajax無關，不過Ajax的出現使得一個頁面實現無重新整理更新更容易，這個時候人們開始意識到，一個頁面發生巨大改變而不能後退是一件很痛苦的事情。

要解決這個問題，就要控制瀏覽器的history，在頁面發生改變時往瀏覽器歷史裡插入一條記錄。但是出於安全的目的，JS是不能直接操作history的。我們必須採用其他方法：IE中，在頁面中插入一個隱藏的iframe，通過改變iframe的location或者DOM，都可以在主視窗的history中產生新記錄，詳細研究可以參考這篇文章；在其他瀏覽器(Firefox、Opera、Safari)中沒有這麼複雜，只需改變url就可以產生一條新的history記錄，當然url不能亂改，要不頁面就跳轉走了，通常我們改變的是location.hash，也就是url“#”以後的部分。下面是具體實現：

首先在頁面中放一個隱藏的iframe：

<style type="text/css" title="default" media="screen">
#history_iframe{position:absolute;top:0; left:0;width:1px; height:1px;visibility:hidden}
</style>
<iframe id="history_iframe" src="blank.html"></iframe>

blank.html的內容也很簡單，放了一個div來存當前的hash：

<html>
  <head><title 
>hack iframe</title></head>
  <body><div id="state"></div></body>
</html>

對不同瀏覽器採用不同方法控制history：

var isIE = typeof(window.opera)!="object"&&window.navigator.userAgent.indexOf("MSIE")>0;
var $ = function(s){return document.getElementById(s)};
function update_status(str){
  if(isIE){
    try{
      var doc = $("history_iframe").contentWindow.document;
      doc.open();
      doc.write('<html><body><div id="state">'+str+'</div></body></html>');
      doc.close();
    }catch(e){}
  }
  location.hash = str;
};

可以測試一下了：

<button onclick="update_status('test1')" >test1</button>
<button onclick="update_status('test2')" >test2</button>
<button onclick="update_status('test3')" >test3</button>

上面就是控制瀏覽器history的基本原理，通過點選三個按鈕，會往瀏覽器寫入三條歷史記錄，這樣儘管頁面依舊沒有重新整理，但是瀏覽器的前進後退卻能開始工作了。剩下的工作很簡單：利用一個定時器不停的檢測狀態是否發生變化（IE檢測iframe裡state的innerText；其他瀏覽器檢測location.hash），然後在檢測到狀態改變時呼叫相應的方法還原頁面內容。限於篇幅，這一部分程式碼就不貼出來了。完整的例項在這裡。

--EOF--

提醒：本文最後更新於 3779 天前，文中所描述的資訊可能已發生改變，請謹慎使用。

如何控制瀏覽器的歷史記錄

js之添加瀏覽器歷史記錄

理解瀏覽器歷史記錄（2）-hashchange、pushState

HTML5的popstate、pushState、replaceState如何玩轉瀏覽器歷史記錄

瀏覽器歷史記錄查詢

微信靜默授權增加瀏覽器歷史記錄導致跳轉死迴圈的解決方案

使用 JavaScript 操作瀏覽器歷史記錄 API

基於CefSharp開發瀏覽器（九）瀏覽器歷史記錄彈窗面板

如何控制瀏覽器的歷史記錄

IE、Chrome等的歷史記錄是什麼控制元件

Android接入WebView（四）——瀏覽器書籤與歷史記錄詳細處理

搜索保存歷史記錄功能

python基礎一 ------簡單隊列用作歷史記錄

oracle命令歷史記錄工具(rlwrap)

新猜數字遊戲--查看歷史記錄

linux下ipython無法保存歷史記錄

清除 SQL Server Management Studio 服務器名稱歷史記錄

Ubuntu 16.04清楚Dash歷史記錄

selenium_webdriver(python)控制瀏覽器滾動條

python爬取七星彩的開獎歷史記錄

清理清理火狐歷史記錄

如何控制瀏覽器的歷史記錄

相關推薦