Javascript 使用带有 history.pushstate 和 popstate 的后退按钮时如何触发更改？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8038726/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to trigger change when using the back button with history.pushstate and popstate?
提问by Rwd
I'm pretty much a novice when it comes to js so I'm sorry if I'm missing something really simple.
我几乎是 js 的新手，所以如果我错过了一些非常简单的东西，我很抱歉。
Basically, I've done some research into using the history.pustate and popstate and I've made it so a query string is added to the end of the url (?v=images) or (?v=profile)...(vmeaning 'view') by using this:
基本上，我已经做了一些研究使用history.pustate和popstate和我做了这么一个查询字符串添加到URL（结束?v=images）或（?v=profile）...（v使用意为“视图”）这个：
var url = "?v=profile"
var stateObj = { path: url };
history.pushState(stateObj, "page 2", url);
I want to make it so I can load content into a div but without reloading the page which I have done using the .load()function.
我想这样做，以便我可以将内容加载到 div 中，但无需重新加载我使用该.load()函数完成的页面。
I then used this code:
然后我使用了这个代码：
$(window).bind('popstate', function(event) {
var state = event.originalEvent.state;
in $(document).ready()section and later tried within just <script>tags and neither worked.
在$(document).ready()部分中，后来仅在<script>标签内进行了尝试，但都没有奏效。
I don't know how to make it so the content changes when I use the back button or at least makes it so I can trigger my own function to do so; and I'm assuming it has something to do with the state object?! I just can't seem to find anything online that explains the process clearly.
我不知道如何使它在我使用后退按钮时内容发生变化，或者至少使我可以触发我自己的功能来这样做；我假设它与状态对象有关？！我似乎无法在网上找到任何可以清楚解释该过程的内容。
If someone could help me out it would be amazing and thank you in advance to anyone who does!
如果有人可以帮助我，那就太棒了，并提前感谢任何帮助我的人！
回答by pimvdb
The popstateonly contains a state when there is one.
popstate当有一个状态时，唯一包含一个状态。
When it goes like this:
当它是这样的：
- initial page loaded
- new page loaded, with state added via
pushState - back button pressed
- 初始页面加载
- 新页面加载，状态添加通过
pushState - 后退按钮被按下
then there is no state, because the initial page was loaded regularly, not with pushState. As a result, the onpopstateevent is fired with a stateof null. So when it is null, it means the original page should be loaded.
那么就没有状态，因为初始页面是定期加载的，而不是pushState. 其结果是，该onpopstate事件与烧制state的null。所以当它是时null，这意味着应该加载原始页面。
You could implement it such that history.pushStatewill be called consistently and you only need to provide a state change function like this: Click here for jsFiddle link
您可以实现它，以便history.pushState始终如一地调用它，并且您只需要提供这样的状态更改功能：单击此处获取 jsFiddle 链接
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);
回答by Ji?í Herník
Maybe it's not best solution, and maybe it doesn't suit your needs. But for me it was best to just reload the page. So the page is consistent an it loads everything according to current querystring.
也许这不是最好的解决方案，也许它不适合您的需求。但对我来说，最好只是重新加载页面。所以页面是一致的，它根据当前的查询字符串加载所有内容。
$(document).ready(function() {
$(window).on("popstate", function (e) {
location.reload();
});
});
