问题标签 [pushstate]

我正在学习 HTML5 中的历史，在此示例中（打开 JavaScript 浏览器控制台查看错误）event.state.url返回：

寻找帮助：http: //jsfiddle.net/un4Xk/

我正在使用 AJAX 刷新一些页面，因此使用以下代码更新历史记录 -

然后我在页面加载时调用这个 onPopState 函数 -

从通过 AJAX 生成内容的页面转到以通常方式加载的页面时，虽然使用后退按钮，但我遇到了一个小问题。URL 将更改，但页面不会重新加载。正如我所期望的那样，再次单击返回会将我带到之前的页面，然后继续工作正常 - 这只是返回按钮不起作用的一种情况。

这里的任何建议将不胜感激。

我正在使用来自 Chris Wanstrath 的 jquery Pjax 插件，又名 Defunkt，在这里演示：http: //pjax.heroku.com。

我已经让它和演示一样工作了。但是，有时这似乎与过于频繁地单击 pjax 链接或浏览器后退/前进按钮相关，我的布局文件无法访问 jquery 并且 pjax() 功能崩溃（即，发生所选 href 的全页加载） .

我想知道这是否只是浏览器 javascript 引擎缓慢（发生在 chrome 和 firefox 以及我的 xampp localhost 以及 pjax.heroku.com 上）太频繁的点击事件和 ajax 调用会混淆浏览器导致它忽略已经加载javascript（即jquery）。

不确定这个假设是否有意义，但对于目前看起来很随意的事情没有任何其他解释，

任何想法将不胜感激，蒂姆

当谈到 js 时，我几乎是一个新手，所以如果我错过了一些非常简单的东西，我很抱歉。

基本上，我已经对使用 history.pustate 和 popstate 进行了一些研究，并且我已经做到了，因此通过使用将查询字符串添加到 url ( ?v=images) 或 ( ?v=profile)...(v意思是“视图”)的末尾这：

我想这样做，以便我可以将内容加载到 div 中，但无需重新加载我使用该.load()功能完成的页面。

然后我使用了这段代码：

在$(document).ready()部分中，后来在<script>标签中尝试过，但都没有奏效。

我不知道如何制作，所以当我使用后退按钮时内容会发生变化，或者至少制作它以便我可以触发我自己的功能这样做；我假设它与状态对象有关？！我似乎无法在网上找到任何可以清楚地解释该过程的内容。

如果有人可以帮助我，那就太棒了，并提前感谢任何这样做的人！

首先，我不完全确定我在做什么或期待什么是正确的。似乎没有太多关于此的文档，但我读过的内容表明这应该可行。

我在尝试使用 history.pushState 时遇到了一些问题，所以我最终制作了一个演示页面来看看出了什么问题。

当我单击“新状态”链接时，我希望在控制台中看到 onpopstate 函数已被触发，并且我会看到一个新的 url（类似于 test/[number]）。

chrome 地址栏中的位置确实会更新，但不会触发 onpopstate 事件。然后，当我单击浏览器中的后退按钮时，看起来多个 popstate 事件正在触发。似乎每次我使用浏览器导航按钮时，每个应该触发的 popstate 事件都会同时发生。

这有点难以解释。这是我希望在控制台中看到的内容。

加载页面。Chrome 在页面加载时触发初始 popstate 事件

popstate.html:132011 年 11 月 19 日星期六 16:23:48 GMT+0000（GMT 标准时间）

popstate.html:14http://example.com/popstate.html

单击“新状态”链接。地址栏中的位置更新为http://example.com/test/0.06458491436205804。

2011 年 11 月 19 日星期六 16:23:53 GMT+0000（GMT 标准时间）

popstate.html:14http://example.com/test/0.06458491436205804

单击浏览器中的后退按钮。地址栏的url返回/popstate.html

popstate.html:132011 年 11 月 19 日星期六 16:26:27 GMT+0000（GMT 标准时间）

popstate.html:14http://example.com/popstate.html

这就是我所期待的。这是我实际看到的...

加载页面

popstate.html:132011 年 11 月 19 日星期六 16:27:42 GMT+0000（GMT 标准时间）

popstate.html:14http://example.com/popstate.html

单击新状态链接。控制台中什么也没有出现。地址栏更改为 /test/0.5458911096211523

单击浏览器中的返回按钮。地址更改回 /popstate.html

popstate.html:132011 年 11 月 19 日星期六 16:27:42 GMT+0000（GMT 标准时间）

popstate.html:14http://example.com/popstate.html

popstate.html:132011 年 11 月 19 日星期六 16:28:57 GMT+0000（GMT 标准时间）

popstate.html:14http://example.com/popstate.html

如您所见，它重复初始 popstate 并显示返回到 /popstate.html，但它永远不会为 push 状态触发。如果我现在在浏览器中按前进，我会得到：

popstate.html:132011 年 11 月 19 日星期六 16:27:42 GMT+0000（GMT 标准时间）

popstate.html:14http://example.com/popstate.html

popstate.html:132011 年 11 月 19 日星期六 16:28:57 GMT+0000（GMT 标准时间）

popstate.html:14http://example.com/popstate.html

popstate.html:132011 年 11 月 19 日星期六 16:29:58 GMT+0000（GMT 标准时间）

popstate.html:14http://example.com/test/0.5458911096211523

（它们都再次出现，这里是截图：http: //img.ctrlv.in/4ec7da04e20d3.jpg）

我不知道是我做错了，我的期望是错误的，还是这实际上是一个错误？

提前感谢所有阅读了所有这些内容并可以为我提供一些启示的人。

使用 Backbone.js，是否可以让路由器导航到它来自的页面？我想将它用于在出现弹出窗口时更改我的 URL，并且我想在隐藏弹出窗口时将其更改回来的情况。我不想简单地返回，因为我想在显示弹出窗口之前将背景页面保持在与离开它的位置完全相同的位置

我只是一个js初学者，所以也许我只是不理解它。但是，window.onstatechange当您之前使用 更改状态时，当您点击浏览器的后退/前进按钮时，不应该触发History.stateObj吗？

我实际上在 Firebug 控制台中看到了对象的变化，但window.onstatechange不会触发！此外 - 非常令人困惑 - 当我window.onpopstate改为使用时，对象不再改变（使用后退/前进按钮时）。

这就是我所做的：

我已经从这里发现，我必须使用

...这行得通，但我还是不太明白为什么window.onstatechange不开火？！

// 编辑：在 Github 上打开了一张票

有什么建议么 ？

我想解决以下问题：给定网页上的链接，我想将指定div元素的内容替换div为另一个页面的元素的内容。比如说，只需将 Google Scholar 页面中的文本“站在巨人的肩膀上”加载到我现有的div元素中。

最新，如果实施以下示例：

我加入window.history是为了更改地址栏中的 URL，并允许用户在没有新内容的情况下恢复网页的先前状态。

现在，我有两个问题：

• 元素的替换<code>div</code>似乎不起作用，因为加载了 WhatIsMyIP 的整个页面。
• 使用 Chrome 时，整个页面会从头开始一次又一次地重新加载。我认为，事件window.onpopstate是连续触发的。

感谢您的帮助！

我只是找不到令人满意的方式来处理浏览器的历史记录。当然有像History.js这样可爱的插件，它适用于较小的东西。但是让我举个例子：

我有一个多页表单，要求用户提供不同的东西。每次提交到下一页后（其实也一样，只是根据 HTTP-POST 变量改变视图），页面上有一些动画和变化：

• 主要内容更改为下一个表单（带有slideUp/slideDown）
• 进度条用动画改变它的状态
• 在此栏下方，有关某些输入的一些信息淡入

所以现在这很基本，但我已经在苦苦挣扎，因为所有动画（最后两部分）在每个状态（不同的 div，不同的输入源）上都是不同的，我不知道如何让它们如此通用，我不必单独指定它们。

不过我可以忍受，但是当用户点击后退按钮时，我必须再次重新定义所有这些动画（反向）。内容加载肯定没问题，它基本上只是用 ajax-load 重新加载文件：

• 我pushstate将输入数据作为stateObjon submit执行
• 所以我可以在绑定的“statechange”事件中执行内容加载

尽管如此，其余的让我发疯。

我已经阅读了大量的教程和示例，但无济于事，这导致我在这里提出我的问题。我正在开发一个带有动态内容 div 的固定侧导航的网页。

问题

当我点击一个链接让我们说“加载”时，内容 div 将显示来自我的其他页面“loadcourses.php”的内容，然后使用历史 api 我将 url 更改为“http://mydomain.com/main。 php?page=loadcourses'。基本上 main.php 不会改变我只会添加其他页面的标题并将其标记为链接后面的参数。

接下来，从动态加载的内容中，我有一些链接可以在单击时显示每个课程的内容。关键部分在这里，一旦我点击任何链接，我应该将另一个参数解析到下一页，即“course.php”。我已经设置了我的 href='http://mydomain.com/course.php?cid=CSC101'。现在我第一次加载动态 div 加载内容并在下一页成功检索 id CSC101 时没有问题。但是当我点击刷新时，我的 cid 丢失了。

根据历史 API，后退/前进按钮可以正常工作。这里需要帮助，谢谢！！我目前正在研究这个 .jsp 原型。