问题标签 [popstate]

我正在尝试使用填充当前选定选项卡的索引

我在 jquery 中有一个 popstate 事件的处理程序，它以编程方式切换 jquery ui 选项卡。

这工作正常，浏览器和我可以使用后退和前进按钮在选项卡之间切换。也适用于两层标签。

但在某些情况下，我想将其他状态推送到堆栈。所以我做了以下事情：

内容在我将其推送到历史之前和之后看起来都不错。用 console.log(history.state); 检查 还尝试检查 chrome 控制台。

但是在我的 popstate 处理程序中，我没有看到对象 event.originalEvent.state 上的 targetId、tabSelected 属性。我在对象上看到了正确的 tabSelected 值，但由于某种原因，我看到了一个修剪状态。

在 Chrome 和 Firefox 中检查。无法获取正确的内容。有什么想法可能是错的吗？提前致谢。

更新

还尝试在每个 pushstate 上增加一个全局变量并将其添加到状态中。事实证明，对于我提到的特定情况，全局变量的值变为 48 而不是 49，这意味着它正在接收最后一个事件。我没有看到我的 popstate 处理程序在两者之间被调用。不知道发生了什么。

另一个更新

当我调用 history.pushState(content, null, "") 两次它工作正常。（仅在一个地方，在另一个地方我仍然称之为一次）。看起来由于某种原因，浏览器正在返回最后一个状态。显然我的代码有问题，因为这种解决方法适用于 chrome 和 firefox。

我试图将此代码输入浏览器的控制台：

然后单击返回按钮。没有显示警报。难道我做错了什么？还是不允许从控制台将 popstate 事件绑定到页面？

使用 Chrome 24 和 Firefox 18

在我的页面上，我有一个听众window.onpopstate

我希望捕获用户的后退箭头并运行我自己的例程

但window.onpopstate在 1) 初始加载页面、2) 重新加载以及 3) 用户按下后退箭头时触发

我可以创建一个状态空间标志并检查它。但更自然的是从事件本身来确定发生了什么。

有什么内在方法可以确定事件是从加载按钮还是后退按钮触发的？当我检查这两个事件时，它们看起来几乎相同。

我希望能够用 html5 popstate 做两件事，我没有使用任何插件，只是这两种方法：

推送状态：

流行状态：

现在，如果我删除一条记录，I want to avoid popping a state which couldn't be loaded只需跳过它并尝试弹出下一条记录。

第二个问题是：（How can I avoid try popping from an empty stack我的应用程序中有一个后退按钮，但我可以以适当的理由摆脱它），但要清楚是否无法加载内容或堆栈中是否没有更多项目.

我不知道如何为我的 ajax 灯箱使用 pushstate 和 popstate。我需要的：

点击后，打开灯箱并更新网址。在关闭灯箱时，将 url 更新到以前的状态。

在浏览器上向后关闭灯箱并更新 url。在浏览器上再次打开灯箱并更新 url。

示例：http: //instagram.com/instagram

这是我到目前为止所拥有的：

代码笔： http ://codepen.io/anon/pen/eLpKr

我有一个包含 iframe 的页面。iframe 可以接受用户的输入（通过按钮单击或菜单选择）并相应地显示内容。我需要的是，当用户操作 iframe 时，浏览器会将每组 iframe 参数推送到历史记录中；当用户点击后退按钮时，iframe 将使用上一个历史条目中保存的参数重新加载其内容。我有一段代码进行重新加载，如下所示。

奇怪的是，当我在 iframe 上进行多个设置时（因此多个状态条目添加到历史记录中），然后单击返回，它会像这样工作，

假设我在历史上有状态 4、3、2，而我现在处于状态 5

1. 第一次单击恢复到状态 4（打印“----state changed----”日志消息
2. 第二次单击会使用默认内容重新加载 iframe。不打印“----state changed----”；不调用重新加载代码。
3. 第三次点击恢复到状态3
4. 第四次点击就像第二次点击
5. 第 5 次单击恢复到状态 2

所以每次点击成功恢复状态后，需要两次点击才能触发 popstate 事件（我也尝试过 statechanged 事件，结果相同）并恢复到另一个先前的状态。

有人知道这里发生了什么吗？提前致谢。

我想编写一个 javascript 代码，能够在 window.onpopstate 或 window.onload 上执行某些操作，但从不执行两次（请注意，chrome 在 onload 和单击后退导航按钮时都会触发 popstate 事件）

我希望它与主要的现代浏览器兼容（IE10 firefox chrome opera safari）

而且我宁愿不使用任何库 - 甚至不使用 jquery。

像这样的东西（但当然有正确的语法）：

谢谢

编辑 1

根据您的建议，我已经尝试过：

但现在我不确定如何将变量设置回 false .. 因为它取决于浏览器等等..

编辑 2

我需要它不止一次地工作，因为用户可能会单击一些 ajax 链接，因此页面不会刷新但 url 会改变，因此他可能会单击后退按钮。这意味着必须在某个时刻将变量设置回 false / 但我不知道何时..

精简版

content.php本教程中引用 的文件有哪些内容？

http://moz.com/blog/create-crawlable-link-friendly-ajax-websites-using-pushstate

带研究的长版

上面的教程是我在实现pushState()和popState()通过 Ajax 加载内容但希望保留书签和浏览器来回导航功能的场景中遇到的最简洁的教程：

已设置演示页面作为概念证明：

http://html5.gingerhost.com/

源代码如下。

实现它需要几个中间步骤，但是我并不完全熟悉：

• 设置 JSON 格式的 PHP 内容文件
• 了解 JSON 格式

对这篇文章html5 pushstate 示例和 jquery 的 $.getJSON 的评论建议使用 Firebug 来查看 HTTP 请求响应，以便查看 JSON 格式。

加载 Firebug 并选择 Console > All 后，当我单击导航链接时，我会看到以下条目：

每个条目的“响应”选项卡中的相应内容采用 JSON 格式：

所以经过一番研究，JSON格式似乎是：

添加一个“真实世界”的例子可以使它：

所以keys在概念证明中似乎是：

所以我的问题是content.php教程中引用的文件需要具备哪些内容？

是否只是复制和粘贴 JSON 对象的问题，用逗号分隔？

它们是否需要封装在数组中？

数组需要名字吗？

然后将哪个封装在花括号中？

PHP 文件是否需要指定 MIME 媒体类型，如果需要，在哪里以及如何指定？

这是来自概念证明的脚本：

我已经阅读了所有关于推送/弹出状态的 Mozilla 文档。我认为我错过了让它发挥作用的重要部分。pushstate 正在按预期更新地址栏。

但是如何找回页面呢？基本上我像这样使用pushState

但后来我想formattedTitle从 popstate 回来，这样我就可以运行getDetail(formattedTitle)函数了。但这不起作用。

在 iOS 7 Safari 中，现在有两种向后/向前导航的方式——使用底部的传统向后/向前按钮箭头或从屏幕边缘滑动。我正在使用动画在我的 ajax 应用程序中的页面之间进行转换，但是如果用户通过边缘滑动导航，我不想触发该转换，因为这本身就是一个动画。

但是，两种导航类型的 popstate 事件对象似乎是相同的——有没有办法区分这两种类型的用户导航，以便我们做出相应的响应？

更新：我能够使用（似乎是）iOS7 Safari 中的一个错误来正确检测边缘滑动与后退按钮点击。错误是使用边缘滑动时不会触发 touchend 事件（直到下一个触摸事件）（但 touchstart 和 touchmove 是）。所以我设置了一个shouldAnimate标志并在 touchmove 上禁用它——然后如果标志被禁用并且 popstate 发生，我知道这是一个边缘滑动。

99% 的时间都是正确的——唯一可能失败的情况是用户边缘滑动部分然后放手让当前页面重新回到原位（此时我的标志仍将被禁用）然后点击后退按钮（不触发触摸事件）。为了处理最后一个 [edge] 情况，我在 touchmove 上设置了一个计时器，以在 50 毫秒后重新启用该标志。

是的，它很“脏”，但现在它几乎在所有情况下都能得到我想要的，所以我可以接受——直到苹果修复了这个错误，但希望他们也会在 popstate 事件对象中提供一个指示符来告诉我们它是一种什么样的导航。