问题标签 [popstate]

如何使用 pushState URL 缓存通过 ajax 加载的页面，从而避免从服务器重新加载页面？例如，

第 1 页：/foo.html。单击按钮，发送 ajax 请求，获取响应并更新页面。历史 pushState 作为新页面 /bar.html。

此时，我们喜欢浏览器将当前页面缓存为/bar.html。

单击后退/前进按钮时，应从浏览器缓存中加载 /bar.html。但它再次从服务器加载。如何做到这一点？也就是让ajax更新的页面被当作普通的GET /bar.html，并被浏览器缓存。如何？

感谢您提供任何线索。戴夫

我编写了一个 jquery 导航脚本，它使用.load. 我还在使用带有 pushstate 和 popstate 的 HTML5 History API。

该代码大部分工作，浏览器的后退和前进按钮功能正常，直到您尝试在浏览器上点击“后退”以转到访问的原始页面。例如：

从第 1 页开始

点击链接到第 2 页 - 作品

点击链接到第 3 页 - 作品

点击“返回”第 2 页 - 有效

点击“返回”第 1 页 - 不起作用

...

控制台给出以下消息：

Uncaught TypeError: Cannot read property 'url' of null

这是我第一次使用popstate. 如何让浏览器导航回原始页面？我希望我能很好地解释这个问题。任何帮助，将不胜感激！

这是该问题的现场演示，如果您希望看到它的实际效果。

很难找到 Safari 7 的问题，但我有一个奇怪的问题。我正在使用pushstate并popstate修改我编写的 ajax 内容加载器代码的浏览器历史记录。该代码工作正常，除了在除 Safari 7+ 之外popstate的所有浏览器中工作的代码外。在 Safari 6 及更低版本中运行良好。

该脚本在所有浏览器中都能正常工作。在 Safari 7 中，页面加载不正确。正常隐藏的#loadingdiv是可见的，正常可见的#contentwrapperdiv是隐藏的。还收到控制台错误：

我对 ajax 和历史状态很陌生。现在我正在做这个网站，我用pjax加载博客文章。像codrops 中等风格的过渡。因为我重新创建了相同的效果并且没有使用任何 codrop 的代码，所以我无法使用后退和前进按钮。或者，也许我设置的事件都错了。或者一般认为这一切都错了。

所以基本上，当前和下一个条目最初都加载到页面上。而且里面的内容.next是隐藏的。并且仅在类更改为 时可见.current。请注意，只有当动画完成时，新的.next才会由 pjax 创建和填充。也许我应该改用其他事件？那里的计时器可能已经放在实际事件中，或者？

或者，也许让后退和前进按钮实际重新加载页面是最简单的。

最好的解决方案是什么？正确完成后是否由 pjax 处理？还是我必须听 popstate 事件才能获得正确的内容？并且可能以相反的方式对其进行动画处理？

我知道有很多与 chrome 和 popstate 事件相关的主题，但是在将 chrome 升级到 35 版后，我遇到了一个新主题。

情况是这样的：

我有一个包含类别和过滤器的列表页面，在您选择类别后，页面等内容通过 ajax 重新加载，一切都由历史 API 处理，工作正常。

但是，当您转到列表中项目的详细信息页面时-标准请求，整个页面被重新加载-然后按浏览器上的后退按钮，您可以在您最后一次单击项目但随后触发 popstate 的位置看到列表页面（我没有'不要在这里谈论初始页面加载时的 chrome popstate，因为版本 34 中的 popstate 不再在 init 上触发），并且由于我之前提到的处理类别的代码，整个页面被重新加载。

所以问题是chrome 35在我们按下后退按钮后触发popstate事件，我的问题是：

如何在用户从详细信息页面返回到我的列表页面以不重新加载此事件后检测到此事件被触发。

我尝试使用文档对象引用者等，但是当它第一次看起来像解决方案时，总是会出现它不起作用的情况。

我已经为此苦苦挣扎了几个小时。我不知道为什么我的 .load() 回调没有触发。任何人都可以对此有所了解。谢谢你的帮助。

它自己的负载工作正常。

我正在尝试创建 AJAX 导航并遇到 popState 的问题。下面是一个 pushStates pageName 的函数（也将指定的 div 从 content.html 加载到 .mainwrap ）。有一个自调用函数，它解析 url 并确定要加载的内容，其中有一个 popstate 事件处理程序。最后是具有数据页属性的元素的单击处理程序，以使它们“ajaxified”。我该怎么办？

编辑：正如建议的那样，我在两个函数之间而不是在两个函数之间放置了“var lastPage”。还是没有修好。我正在“返回”的网址是 /#undefined

我想检测后退按钮单击事件，所以我在 jquery 中使用 window popstate 事件。但它根本没有在任何时候开火。

请参考下面的代码

也试过这种方式。

是否需要为此添加任何外部脚本？或其他任何需要在我的页面中配置的内容。

我正在尝试使用 JavaScript 在页面上加载不同的内容，具体取决于其哈希标记。但是，它也应该在不支持popstate方法的旧浏览器中工作。

问题是，当window.location.hash我点击#newhashtag当前页面（例如example.com/#currenthashtag）上的链接（例如）后，document.ready它仍然向我显示旧的哈希标签。只有在单击第二个链接后，第一个链接中的前一个哈希标签才会显示在window.location.hash.

那么，在不使用 popstate 的情况下处理网站的不同哈希状态的最简单方法是什么？

很抱歉这里有新手问题，我错过了一些东西，可能很简单，但我猜对 javascript 很重要..

我有一个 ajax 网站，有四个 html 页面，index.php、food_and_health.php、enlightment.php 和 about_us.php。我在这三个中都有ajax函数，而不是索引。

而且我确实知道我需要添加 popstate 功能，以使用后退和前进，我现在正在研究一个教程，如你所见，我只有控制台日志。

我收到控制台消息“未定义 foo”，我尝试将其设为全局变量，但没有成功，因为我也不知道这是否是问题所在。

我的 html 中没有锚，或任何 id 为 'foo' 的东西，但我尝试在我的 js.file 中从 foo 更改为 'text' 和 'cssmenu'，并尝试添加 id=' foo' 到我的一个锚标记，在我的 html 中，但仍然是相同的消息。

所以我猜，它是一个局部变量，在我的 ajax 函数中。实际上，页面可以正常工作，除了后退和前进，如果我尝试直接导航到 ajax-page/ 状态。我知道这是因为我需要在我的 popstate 函数中设置一些数据，我认为像 this.url 这样的东西也可以在那里工作，就像在我的 pushstate-function 中一样。（push-state 和 popstate 之间的结合就是我的意思失踪。）

但是如何添加 popstate 函数呢？我是否需要为每个页面指定，或者我可以以某种方式说，使用 this.url，因为它在 pushstate 函数中完成，并使用该状态，因为它保存在 pushstate 中？

我想我需要在ajaxfuntion中以某种方式链接popstate..

第二个问题，你没那么重要。为什么我的控制台日志显示一些 jQuery？那是因为'google-apis'，我有我的字体（橘子）的链接吗？由于我不使用任何 jQuery，我对我的索引页使用 jQuery 感到惊讶，但我认为这就是问题所在。在我的控制台中，我有 jquery.1.8.2.min.js 和 collectorjQuery.js 这些来自“googleapis”吗？:)

我还将添加一个 jsfiddle，这显示了我的 food_and_health.php 页面，以及我的 css 和 js。（主要忽略css，只是为了看起来'ok'而添加）：

http://jsfiddle.net/y0o39897/4/

并且 cssmenu 不会在小提琴中打开，但至少会在 chrome 和 firefox 中打开。

这是我的js，我有点挣扎！

我已经阅读了很多关于此的页面，并且据我所知；pushstate 采用任何状态，在我的例子中是 this.url，即被点击的 url/anchor，并保存该状态。然后，popstate 将使用该状态在该 html 页面中的 ajax 页面之间来回导航。如果我想从 page2/ajaxfile.php 返回到 page1/someotherAjaxpage.php，我需要 replacestate。这个对吗？

很抱歉这个问题很长，两个问题合二为一，但我是新手，想尽可能清楚地了解这一点，并完全理解它，这就是我尽量不使用 jQuery 的原因。

我很难找到使用 ajax-popstate-和 javascript（不是 jQuery）的教程。感谢您对此的任何帮助:)