我應該用什麼JS在使用onPopState和pushState的

處理後退按鈕點擊

我使用pushState的改變網站的網址：我應該用什麼JS在使用onPopState和pushState的

history.pushState("", "info", "/info");

偉大的工程，但現在的後退按鈕不工作。我相信我需要使用通過歷史堆棧並呈現相應頁面的onPopState編寫自己的後退和前進按鈕行爲。訣竅是，當「後退」爲空時，它應該做後退按鈕通常會做的事情（在用戶進入我的網站之前回到頁面）。

這似乎是非常標準的行爲，是否有配方/我可以使用的一些標準代碼？

來源

2011-01-12 Ted

你如何處理你的`yourdomain.com/info`的直接條目？這是否正確工作？ – 2011-01-12 01:00:10

啊，我想出了一個解決方案，不是很難，因爲我想（基本上它只是使用的URL路徑來呈現正確的東西）：

// Makes the back button work 
window.onpopstate = function(event) { 
    if (document.location.pathname == '/main') { 
     $("#main").show(); 
     $("#info").hide(); 
     $("#settings").hide(); 
    } 
    if (document.location.pathname == '/info') { 
     alert('info'); 
     $("#main").hide(); 
     $("#info").show(); 
     $("#settings").hide(); 
    } 
    if (document.location.pathname == '/settings') { 
     alert('settings'); 
     $("#main").hide(); 
     $("#info").hide(); 
     $("#settings").show(); 
    } 
};

來源

2011-01-12 00:35:12 Ted

儘管這會起作用，但我認爲在原始`pushState（）`函數中輸入非空狀態是不必要的。 `history.pushState（{state：「dummy state」}，「info」，「/ info」）;` – cartbeforehorse 2013-07-07 13:52:31

奇怪的是，後退按鈕不工作您。我使用的是History.js，它爲所有非HTML5瀏覽器提供了向後兼容的體驗，並且我沒有在任何瀏覽器或測試套件中遇到過這個問題......也許您會想要放棄這個問題？

來源

2011-01-30 13:54:37 balupton

我不認爲你需要做的事情自己實現使用pushState的後背部和前進按鈕的行爲，應該還是像以前一樣工作，但它會引發popstate，而不是讓一個HTTP請求等

我使用Davis.js來實現類似於您所擁有的功能，將某些onpopstate事件路由到行爲，將其檢出。

來源

2011-02-04 13:13:17

沒有框架，它僅僅是：

window.onpopstate = function(event){ 
    // do something 
}

來源

2013-05-05 05:24:00

我剛剛遇到這個問題我自己，我想我找到了爲什麼它不工作。

該文檔在該主題上似乎非常含糊。我讀過的說，你可以輸入一個空字符串（或空對象）到狀態參數中（如你在你的例子中所做的那樣）。

history.pushState("", "info", "/info");

當我這樣做，（在Chrome和Firefox的測試），「後退」和「前進」按鈕做的工作，在這個意義上，他們改變在瀏覽器的地址欄中的鏈接。但是，這就是他們所做的 - 與該鏈接關聯的頁面無法加載！

所以現在試試這個：

history.pushState({state: dummyState}, "info", "/info");

現在，「後退」和「前進」按鈕，似乎工作，因爲我希望他們來。就好像瀏覽器說「如果沒有'狀態'鎖定，那麼我就不打擾加載頁面。」

鑑於它在Firefox和Chrome中的工作方式相同，我猜這是一個記錄的功能。但如果是這樣，它的埋藏深度比我關心的要深。

來源

2013-07-07 13:46:34 cartbeforehorse

我應該用什麼JS在使用onPopState和pushState的

回答

相關問題