Ajax保留瀏覽器歷史的兩個解決方案-js教程-PHP中文網

首頁

web前端

js教程

Ajax保留瀏覽器歷史的兩個解決方案

巴扎黑

Apr 29, 2017 pm 03:44 PM

ajax

總是在github down點東西，github整個介面做的不錯，體驗也很好~對於其中的源代碼滑動的特效最為喜歡了~剛開始以為這個只是普通的ajax請求效果，但是發現這個特效能夠導致瀏覽器網址列跟著變化，再點選前進後退按鈕後又可以將程式碼滑回滑出~~於是乎就來研究下吧~

# 　　一、透過錨點Hash實現：

　　在這方面其實國內很早就有做了，比如淘寶畫報，通過的是在地址欄後面加#錨點實現的，瀏覽器是可以識別錨點為單位的歷史記錄的。但不是說頁面本身有這個錨點，錨點的Hash只是起到一個引導瀏覽器將這次的記錄推入歷史記錄棧頂的作用。

　　來做一個小小的demo：

    <style type="text/css">
        #tab1_header,#tab2_header{
            cursor:pointer;
            border:1px solid;
            width:50px;
        }
        #tab1,#tab2{
            width:90%;
            height:200px;
            border:1px solid;
        }
    </style>
    <p id="tab_header">
    	<span id="tab1_header">Tab1</span>
    	<span id="tab2_header">Tab2</span>
    </p>
    <p id="tab1">1</p>
    <p id="tab2">2</p>

　　一個很簡單的Tab切換如果一般情況下就直接：

$("#tab1_header").click(function() {
            $("#tab2").hide();
            $("#tab1").show();
});
$("#tab2_header").click(function() {
            $("#tab1").hide();
            $("#tab2").show();
});

但如果點擊到tab2時想透過後退按鈕退到tab1時就不行了，如果刷新的話瀏覽器的行為完全不是出於用戶的想法，這樣的話，我們可以加入#錨點來模擬新頁面，為什麼要說模擬呢，如果直接透過js改變window.location瀏覽器會重新載入頁面，但加#就不會重新載入並且能保存在歷史中。 JS透過window.location.hash來控制URL後面的錨點#。

　　我們把程式碼改為這樣：

$(function(){
			showTab();
			$(window).bind(&#39;hashchange&#39;, function(e){
				showTab();
			});
			$("#tab1_header").click(showTab1);
			$("#tab2_header").click(showTab2);
		});

        function showTab() {
            if (window.location.hash == "#tab2"){
				showTab2();
			} else {
				showTab1();
			}
        }
        function showTab1() {
            $("#tab2").hide();
            $("#tab1").show();
            window.location.hash = "#tab1";
        };
        function showTab2() {
            $("#tab1").hide();
            $("#tab2").show();
            window.location.hash = "#tab2";
        };

加上window.location.hash = "#tab1"這段程式碼就行了，點擊tab後，網址列後面就會加上#tab1，點擊tab2後就會改成#tab2，當瀏覽器偵測到url變化時就會觸發hashchange這一事件，就是用戶在點擊後退時能夠得到的事件就能夠透過window.location.hash進行判斷並進行ajax操作了，但是haschange這個事件並不是每個瀏覽器都有的，只有現代高階瀏覽器才有，所以在低階的瀏覽器中需要用輪詢來偵測URL是否在變化，這個這裡就不具體說了。

　　二、透過HTML5加強型的History物件實作(類別Pjax)

可以透過window.history.pushState這個方法無刷新的更新瀏覽器地址欄，這個方法在更新地址欄的同時將地址壓入歷史記錄堆棧裡，而要取出這個棧頂頁面則可以用popstate這個事件來捕獲~

　　來模擬一下github的環境，github中每個url是對應一個完整的實際頁面的，所以在ajax請求頁面時需要異步獲取target頁面中指定id容器中的內容：

# 　　例如有這樣兩個頁面：

　　index.html

<!DOCTYPE HTML>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=gbk">
        <title>index</title>
    </head>
    <body>
    	<script>document.write(new Date());</script>
    	<p id="cn">
        	<a href="second.html">加载前</a>
        </p>
    </body>
</html>

　　second.html

<!DOCTYPE HTML>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=gbk">
        <title>second</title>
    </head>
    <body>
    	<script>document.write(new Date());</script>
        <p id="cn">
        	<a href="index.html">加载后</a>
        </p>
    </body>
</html>

假如用同步的http請求打開的話完全是兩個頁面，兩個頁面加入很多地方一樣的話我們完全可以用這種方法來實現ajax請求變更DOM，我在這裡加了<script>document.write(new Date());</script>語句透過它的變化能得知是否取自兩個http請求，局

　　部的ajax請求是不會改變這個時間顯示的。

$(function() {
    var state = {
        title: "index",
        url: "index.html"
    };
    $("#cn").click(function() {
        window.history.pushState(state, "index", "second.html");
        var $self = $(this);
        $.ajax({
            url: "second.html",
            dataType: "html",
            complete: function(jqXHR, status, responseText) {
                responseText = jqXHR.responseText;
                if (jqXHR.isResolved()) {
                    jqXHR.done(function(r) {
                        responseText = r;
                    });
                    $self.html($("<p>").append(responseText.replace(/<script\b[^<]*(?:(?!<\/script>)<[^<]*)*<\/script>/gi, "")).find("#cn"));
                }
            }
        });
        document.title = "second";
        return false;
    });
    $(window).bind(&#39;popstate&#39;, function(e) {
        var st = e.state;
        //$("#cn").load(st.url + " #cn");
        $.ajax({
            url: "index.html",
            dataType: "html",
            complete: function(jqXHR, status, responseText) {
                responseText = jqXHR.responseText;
                if (jqXHR.isResolved()) {
                    jqXHR.done(function(r) {
                        responseText = r;
                    });
                    $("#cn").html($("<p>").append(responseText.replace(/<script\b[^<]*(?:(?!<\/script>)<[^<]*)*<\/script>/gi, "")).find("#cn"));
                }
            }
        });
        document.title = e.state.title;
    });
});

上面語句中當#cn元素被點擊時將state透過pushState方法壓入歷史記錄棧，並在第三個參數中將瀏覽器URL框中指向second頁面，並透過ajax將second頁面異步載入，將相應的部分加入容器中，這樣就實現了異步加載並改變地址欄url了，同樣用戶點擊後退時，觸發popstate，剛才pushState方法中的第一個參數state便是這裡傳入的形參e中的state屬性，透過var st = e.state取出供開發使用。同時載入index頁面中對應內容。時間有限這個js沒有進行重構，直接寫$.ajax了，其實假如不需要任何特效單純的異步載入在jQ中可以直接用$("#cn").load(st.url + " #cn ");將請求的html對應的#cn放到本頁的#cn容器中，但加入要更加炫的特效的話就要直接操作ajax傳回的資料了。

$("#cn").html($("<p>").append(responseText.replace(/<script\b[^<]*(?:(?!<\/script>)<[^<]*)*<\/script>/gi, "")).find("#cn"));

先創建一個p容器在將經過script過濾過的程式碼裝入這個容器在透過find方法找到裡面對應的選擇器容器插入本身的頁面中，這裡可以不用html來填充，可以根據自己的專案需要用slideUp， show什麼的特效進行內容顯示~~

# 另外這裡要推薦一個jQuery元件叫pjax（https://github.com/defunkt/jquery-pjax），比較牛叉的一個元件，異步的部分load進來另外一個頁面對應容器中的內容，實現的機理和我上面的第二種方案一致。 pushState + ajax = pjax 感覺這個應用會熱起來的。

稍微總結下，兩種方案其實對於想IE6或FF3.6等比較低階的瀏覽器支援不是很好，前者若要相容低階瀏覽器要用輪詢來監聽瀏覽器網址列行為，而後者的話是完全的HTML5應用，對於非HTML5瀏覽器只能做判斷跳轉了。 ###

　　如pjax最后的一段无奈的兼容处理：

$.support.pjax = window.history && window.history.pushState


// Fall back to normalcy for older browsers.
if ( !$.support.pjax ) {
  $.pjax = function( options ) {
    window.location = $.isFunction(options.url) ? options.url() : options.url
  }
  $.fn.pjax = function() { return this }
}

以上是Ajax保留瀏覽器歷史的兩個解決方案的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

JavaScript引擎：比較實施Apr 13, 2025 am 12:05 AM

不同JavaScript引擎在解析和執行JavaScript代碼時，效果會有所不同，因為每個引擎的實現原理和優化策略各有差異。 1.詞法分析：將源碼轉換為詞法單元。 2.語法分析：生成抽象語法樹。 3.優化和編譯：通過JIT編譯器生成機器碼。 4.執行：運行機器碼。 V8引擎通過即時編譯和隱藏類優化，SpiderMonkey使用類型推斷系統，導致在相同代碼上的性能表現不同。

超越瀏覽器：現實世界中的JavaScriptApr 12, 2025 am 12:06 AM

JavaScript在現實世界中的應用包括服務器端編程、移動應用開發和物聯網控制：1.通過Node.js實現服務器端編程，適用於高並發請求處理。 2.通過ReactNative進行移動應用開發，支持跨平台部署。 3.通過Johnny-Five庫用於物聯網設備控制，適用於硬件交互。

使用Next.js（後端集成）構建多租戶SaaS應用程序Apr 11, 2025 am 08:23 AM

我使用您的日常技術工具構建了功能性的多租戶SaaS應用程序（一個Edtech應用程序），您可以做同樣的事情。首先，什麼是多租戶SaaS應用程序？多租戶SaaS應用程序可讓您從唱歌中為多個客戶提供服務

如何使用Next.js（前端集成）構建多租戶SaaS應用程序Apr 11, 2025 am 08:22 AM

本文展示了與許可證確保的後端的前端集成，並使用Next.js構建功能性Edtech SaaS應用程序。前端獲取用戶權限以控制UI的可見性並確保API要求遵守角色庫

JavaScript：探索網絡語言的多功能性Apr 11, 2025 am 12:01 AM

JavaScript是現代Web開發的核心語言，因其多樣性和靈活性而廣泛應用。 1)前端開發：通過DOM操作和現代框架（如React、Vue.js、Angular）構建動態網頁和單頁面應用。 2)服務器端開發：Node.js利用非阻塞I/O模型處理高並發和實時應用。 3)移動和桌面應用開發：通過ReactNative和Electron實現跨平台開發，提高開發效率。

JavaScript的演變：當前的趨勢和未來前景Apr 10, 2025 am 09:33 AM

JavaScript的最新趨勢包括TypeScript的崛起、現代框架和庫的流行以及WebAssembly的應用。未來前景涵蓋更強大的類型系統、服務器端JavaScript的發展、人工智能和機器學習的擴展以及物聯網和邊緣計算的潛力。

神秘的JavaScript：它的作用以及為什麼重要Apr 09, 2025 am 12:07 AM

JavaScript是現代Web開發的基石，它的主要功能包括事件驅動編程、動態內容生成和異步編程。 1)事件驅動編程允許網頁根據用戶操作動態變化。 2)動態內容生成使得頁面內容可以根據條件調整。 3)異步編程確保用戶界面不被阻塞。 JavaScript廣泛應用於網頁交互、單頁面應用和服務器端開發，極大地提升了用戶體驗和跨平台開發的靈活性。