如何在使用帶有history.pushstate和popstate的後退按鈕時觸發更改？

我幾乎是一個新手，當談到js，所以我很抱歉，如果我錯過了一些非常簡單的東西。如何在使用帶有history.pushstate和popstate的後退按鈕時觸發更改？

基本上，我已經做了一些研究使用history.pustate和popstate和我做了這麼一個查詢字符串添加到URL（?v=images）或（?v=profile）......結束（v通過使用這個意義上，「視圖」）：

var url = "?v=profile" 
var stateObj = { path: url }; 
history.pushState(stateObj, "page 2", url);

我想讓它這樣我就可以將內容加載到一個div，但沒有重裝，我已經使用功能完成的頁面。

然後我用這個代碼：

$(window).bind('popstate', function(event) { 
    var state = event.originalEvent.state;

在$(document).ready()節，後來只是<script>標籤內試圖和既不工作。

我不知道如何使內容在使用後退按鈕時發生變化，或者至少可以這樣做，因此我可以觸發自己的功能;我假設它與狀態對象有關？我似乎無法找到任何能夠清楚解釋流程的東西。

如果有人能幫助我，這將是驚人的，並提前感謝任何人誰！

來源

2011-11-07 Ross Wilson

popstate只有當有一個時纔會有一個狀態。

當它是這樣的：

初始頁面加載
加載新的頁面，通過pushState
添加狀態後退按鈕按下

那麼就沒有狀態，因爲初始頁面定期加載，而不是pushState。結果，onpopstate事件被激發state的null。所以當它是null，這意味着應該加載原始頁面。

您可以實現它使得history.pushState將一貫要求，你只需要提供一個狀態改變函數是這樣的：Click here for jsFiddle link

function change(state) { 
    if(state === null) { // initial page 
     $("div").text("Original"); 
    } else { // page added with pushState 
     $("div").text(state.url); 
    } 
} 

$(window).on("popstate", function(e) { 
    change(e.originalEvent.state); 
}); 

$("a").click(function(e) { 
    e.preventDefault(); 
    history.pushState({ url: "/page2" }, "/page2", "page 2"); 
}); 

(function(original) { // overwrite history.pushState so that it also calls 
         // the change function when called 
    history.pushState = function(state) { 
     change(state); 
     return original.apply(this, arguments); 
    }; 
})(history.pushState);

來源

2011-11-07 15:45:54 pimvdb

非常感謝您的幫助@ pimvdb，甚至更多，爲超級快速回復。祝一切順利。 –

非常感謝，這真是太完美了！ – pmrotule

你好，但是如果初始頁面的數據是由ajax從數據庫動態生成的，那該怎麼做？ – hous

也許它不是最好的解決辦法，也許它並不適合你需要。但對我來說，最好只是重新加載頁面。所以頁面是一致的，它根據當前的查詢字符串加載所有內容。

$(document).ready(function() { 
    $(window).on("popstate", function (e) { 
     location.reload(); 
    }); 
});

來源

2018-02-22 10:26:25

如何在使用帶有history.pushstate和popstate的後退按鈕時觸發更改？

回答

相關問題