javascript - 使用 pushState 后浏览器中的后退按钮无法正常工作（在 Chrome 中）

Question

我在 JS 响应中使用这种类型的行

if (history && history.pushState){
     history.pushState(null, null, '<%=j home_path %>');
}

但是当我back在浏览器中单击时，我看到的是响应的 JS 代码而不是上一页。

有没有办法让后退按钮工作，所以它会重新请求最后一个 url 的页面（在home_pathpushStated 之前？

更新：

我发现了这个..似乎其他人也有同样的问题.. History.js 也没有解决它

所以要确认那里的一些评论..这只发生在chrome中

我的想法

我认为这一切的根源在于popstate请求的pushstate文档类型相同（js响应）。需要做的是对popstate请求html响应..我只是不知道如何

更多更新：

 $(window).bind("popstate", function() {
      $.getScript(location.href);
    });

这解决了这个问题，但是根据对没有 ajax 缓存的jQuery $.getScript() 的理解，它会添加时间戳.. 这会污染 url.. 将其关闭会使其无法再次以相同的效果工作..

任何人都知道如何解决这个问题？

更多更新

我在整个互联网上跟踪了该问题的踪迹，并以chrome中的一个问题结束，该问题指向一个 rails 问题（firefox 工作正常）以及rails-ujs 中的一个问题，即在响应中不包括 Vary Header

示例可以在这里找到

score 12 · Accepted Answer

我目前正在玩弄

 response.headers['Vary'] = 'Accept'

乍一看，这似乎解决了问题。

如果有人有同样的问题，请检查并告诉我

score 7 · Accepted Answer

您需要为 popstate 事件添加一个侦听器

window.onpopstate = function(event) {
    //load the page
};

当按下后退按钮时，url 会更改，然后会触发 popstate 事件。您有责任在 popstate 侦听器中加载与更改的 url 匹配的详细信息。

某些浏览器会在页面首次加载时触发 popstate 事件，从而导致无限的页面加载循环。这可以通过添加以下检查来避免

var loadPage = window.history.state;
window.onpopstate = function(event) {
    if (loadPage) 
        //load the page
};

然后在调用 pushState 时将 loadPage 设置为 true

history.pushState(null, null, '<%=j home_path %>');
loadPage = true;

该技术适用于所有支持 html5 history api 的浏览器。

score 3 · Accepted Answer

3

它发生在我的 sinatra 和 chrome 上。

解决了它：

$.ajaxSetup({ cache: false });

于 2013-04-04T07:48:57.427 回答

score 0 · Accepted Answer

我已经使用本地 HTML 文件在我的浏览器上测试了这段代码，但我得到了一个控制台安全错误：

SecurityError: The operation is insecure.
  history.pushState(null, null, '<%=j home_path %>');

我可以看到操纵浏览器历史记录可能被认为是一种潜在的危险行为，所以我想你应该检查一下这是否也不会发生在你身上。尝试使用 Firebug Javascript 控制台。本地和 http:// HTML 文件之间的行为也可能存在差异。

说了这么多，因为我看到history数组的最后一个元素基本上是当前页面，所以如果你想改变前一个，你可以使用两个 pushState() 命令来做到这一点——首先你推送上一个元素你想要，然后你再次推动当前的路径。如果我正确理解了您的问题。

4 回答 4