javascript 使用 pushState 后浏览器中的后退按钮无法正常工作（在 Chrome 中）
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15394156/
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
back button in browser not working properly after using pushState (in Chrome)
提问by Nick Ginanto
I am using this type of line in an JS response
我在 JS 响应中使用这种类型的行
if (history && history.pushState){
history.pushState(null, null, '<%=j home_path %>');
}
but when I click backin the browser, I see the JS code of the response instead of the previous page.
但是当我back在浏览器中单击时，我看到的是响应的 JS 代码，而不是上一页。
Is there a way to make the back button work so it would re-request the page of the last url (before home_pathas pushStated in?
有没有办法让后退按钮工作，所以它会重新请求最后一个 url 的页面（在home_pathpushStated之前？
Update:
更新：
I've found this.. it seems other have the same issue with.. History.js doesn't fix it either
我发现了这个.. 似乎其他人也有同样的问题 .. History.js 也没有修复它
So to confirm some of the comments there.. This happens only in chrome
所以为了确认那里的一些评论..这只发生在chrome中
What I think
我的想法
I think the root of all this is that the popstate requests the same type of the pushstate document (js response). What needs to be done is on popstate request the html response.. I just don't know how
我认为这一切的根源在于 popstate 请求了相同类型的 pushstate 文档（js 响应）。需要做的是在 popstate 请求 html 响应上.. 我只是不知道如何
More updates:
更多更新：
seeing http://railscasts.com/episodes/246-ajax-history-stateit mentions to use
看到http://railscasts.com/episodes/246-ajax-history-state它提到使用
$(window).bind("popstate", function() {
$.getScript(location.href);
});
this solves the issue but according to understanding jQuery $.getScript()withtout ajax caching it will add timestamps.. which pollutes the url.. turning it off makes it not work again with the same effect..
这解决了这个问题，但根据对没有ajax 缓存的jQuery $.getScript() 的理解，它会添加时间戳.. 这会污染 url.. 关闭它会使其无法再次工作，效果相同..
Anyone knows how to solves this?
有谁知道如何解决这个问题？
Even more Updates
更多更新
I tracked the trails of the issue all over the interweb and ended with an issue in chromewhich points to a rails issue (firefox works fine however) and an issue in rails-ujsconcerning not including Vary Header in the responses
我在整个互联网上跟踪了该问题的踪迹，并以chrome中的一个问题结束，该问题指向一个 rails 问题（但是 firefox 工作正常）和rails-ujs 中的一个问题，即在响应中不包括 Vary Header
Example can be found here
示例可以在这里找到
采纳答案by Nick Ginanto
I am currently playing around with doing
我目前正在玩弄
response.headers['Vary'] = 'Accept'
which seems to solve the problem, at first look.
乍一看，这似乎解决了问题。
If anyone has the same issue, please check it and let me know
如果有人有同样的问题，请检查并告诉我
回答by graham mendick
You need to add a listener to the popstate event
您需要为 popstate 事件添加一个监听器
window.onpopstate = function(event) {
//load the page
};
When the back button is pressed the url is changed and then the popstate event is fired. It's your responsibility to load the details in your popstate listener that match the changed url.
当按下后退按钮时，url 会更改，然后会触发 popstate 事件。您有责任在 popstate 侦听器中加载与更改后的 url 匹配的详细信息。
Some browsers fire a popstate event when the page first loads, causing an infinite page loading loop. This can be avoided by adding the following check
某些浏览器在页面首次加载时会触发 popstate 事件，从而导致页面无限加载循环。这可以通过添加以下检查来避免
var loadPage = window.history.state;
window.onpopstate = function(event) {
if (loadPage)
//load the page
};
Then set the loadPage to true when pushState is called
然后在调用 pushState 时将 loadPage 设置为 true
history.pushState(null, null, '<%=j home_path %>');
loadPage = true;
This technique works in all browsers that support html5 history api.
该技术适用于所有支持 html5 历史 API 的浏览器。
回答by trompa
It happened my with sinatra & chrome.
它发生在我的 sinatra 和 chrome 上。
Solved it with:
解决了它：
$.ajaxSetup({ cache: false });
回答by Okarin
I've tested this code on my browser using a local HTML file and I've gotten a console security error:
我已经使用本地 HTML 文件在我的浏览器上测试了此代码，但出现了控制台安全错误：
SecurityError: The operation is insecure.
history.pushState(null, null, '<%=j home_path %>');
I can see how manipulating browser history may be considered a potentially dangerous behaviour, so I guess you should check that this is not happening for you as well. Try using the Firebug Javascript console. It is also possible that there might be differences in behaviour between local and http:// HTML files.
我可以看到如何操纵浏览器历史记录可能被视为一种潜在的危险行为，所以我想您应该检查这是否也不会发生在您身上。尝试使用 Firebug Javascript 控制台。本地和 http:// HTML 文件之间的行为也可能存在差异。
Said this, for what I've seen the last element of the historyarray is basically the current page, so if you want to change the previous one, you might do it by using two pushState() commands - first you push the previous element that you desire, then you push the current path again. If I understood your problem correctly.
这么说吧，因为我看到的history数组的最后一个元素基本上是当前页面，所以如果你想改变前一个，你可以使用两个 pushState() 命令来完成 - 首先你推送前一个元素你想要，然后你再次推动当前的路径。如果我正确理解你的问题。
