问题标签 [popstate]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票
1 回答
9408 浏览

vue.js - 在 vuejs 上监听 onpopstate 事件

我对 Vue 很陌生,我试图弄清楚如何在 vuejs 上监听 onpopstate 事件以在它发生时启动特定功能。我浏览了路由器文档,但在 vue 上找不到 onpopstate 事件处理程序的等效项。

谢谢你的帮助,威尔

0 投票
0 回答
705 浏览

javascript - 历史记录 back() 按钮的行为与后退按钮不同

我希望每次用户单击后退按钮或调用 history.back() 时都会调用弹出状态事件。根据我的阅读,history.back() 相当于使用浏览器上的后退按钮。

我有一种情况,我在打开叠加层时将状态推送到历史堆栈,并在用户单击关闭按钮以关闭叠加层时调用 history.back()。这相当于单击后退按钮。

浏览器后退按钮始终正常工作——即它触发 popstate 事件,并正确执行我的自定义 popstatehandler。但是,history.back() 函数并不总是调用 popstate 事件(因此不会关闭覆盖)。

这表明两者之间存在一些内在差异,但我不知道那是什么!

只有当我通过单击链接在新选项卡中打开页面来打开相关页面时,才会出现这种神秘的错误行为。直接打开页面使 popstate 事件触发就好了。

0 投票
1 回答
1178 浏览

javascript - 防止出现 popstate 时更改 URL

嗨,我正在尝试实现“您确定要离开此页面吗?” 导航离开带有尚未提交的已修改表单的页面时弹出。该网站是使用自定义框架构建的单页应用程序。

由于所有锚链接都由框架处理,因此可以看出单击侧导航链接将导致页面更改并显示 Bootstrap 确认对话框。如果用户单击“确定”,则单击通过并进行 AJAX 调用以提取新页面内容。如果他们单击“取消”,则模式将被解除并停留在当前页面上。

我无法解决的部分是用户在其网络浏览器中单击“返回”按钮时。这会触发“popstate”事件。所有导航/历史都使用历史 API 进行管理,因为它是一个单页应用程序。

问题是当有人点击“返回”时,URL 会在“popstate”发生后发生变化,然后我会显示“你确定要离开吗?” 模态的。当事件发生时,地址栏中的 URL 现在会显示您将从历史记录中转到的页面,而不是您当前正在查看的页面。如果您在引导程序中单击“取消”,请确认您现在在地址栏中显示错误的 URL。

event.preventDefault、event.stopPropagation 或在 popstate 中返回 false 不会阻止 URL 更改。AFAIK 你不能在“popstate”之前拦截“Back”按钮。尝试在“popstate”中使用 window.history.replaceState 似乎也不起作用。

有没有人有关于如何使这项工作的解决方案?

  1. 你能阻止 URL 在“popstate”事件中发生变化吗?
  2. 您能否以某种方式在“popstate”中重写历史记录以将 URL 更改回它在当前页面上的内容并保留先前的条目,如果您确实决定在接受模式后希望它通过?
  3. 其他一些我没有想到的解决方案?

我最初的想法是阻止“popstate”中的 URL 更改,然后让框架触发链接单击以加载新内容并在单击“是”时更改 URL,但我还没有找到这样做的方法。

谢谢!

0 投票
0 回答
65 浏览

javascript - 有没有办法访问除当前之外的其他 js 历史状态

假设我做了以下事情:

  1. 有没有办法在 onpopstate 回调中访问以前的状态(你要离开的那个)
  2. 有没有办法访问状态列表,例如。[null, {foo:bar}, {foo:baz}]
0 投票
1 回答
365 浏览

javascript - Onpopstate 函数只工作一次

在我的网站上,当单击链接时,会运行一个 jQuery 函数,该函数使用 AJAX 加载内容并且一切正常。我希望能够使用浏览器中的后退按钮来加载最后一个 AJAX 请求。

当我单击后退按钮时,它会正确加载最后一个 AJAX 请求,但是当我再次按下它时,它只会加载相同的 AJAX 请求,而不是前一个。这是我的代码:

知道为什么这个功能只工作一次吗?谢谢

0 投票
2 回答
307 浏览

javascript - 与跨文档工作的 onpopstate 类似的事件是什么?

来自 Mozilla 文档:

每次活动历史条目在SAME DOCUMENT的两个历史条目之间发生变化时,都会向窗口发送一个popstate事件。

如果我需要在浏览上下文中收听跨文档的“会话历史记录更改”,我应该使用哪个窗口事件?

我正在编写一个 js 库,当用户使用后退/前进浏览器按钮时,它有助于跟踪导航。当用户从页面 B 导航到页面 A(向后)或页面 A 到页面 B(向前)时,库将记录。我已经使用“popstate”事件实现了对使用哈希的页面的跟踪,但是当用户从页面 A 导航到页面 B 时,此事件不起作用。

我已经查看了 pageshow/pagehide 事件,但它们也会在简单的页面加载时触发,而不仅仅是在“会话历史记录”更改时(即从历史记录中获取页面)。

我应该看什么才能知道“浏览器已查看会话历史记录以获取当前页面”?

0 投票
1 回答
30 浏览

javascript - Javascript pushState,onpopstate - 在〜10个状态之后 - 单击第5步(在后退按钮上)并输出第4步

用于 pushState 的代码

用于检查状态的代码

假设我访问了 10 个页面 - 当我单击第 5 页时,它在浏览器中显示了很好的标题。但由于某种奇怪的原因,它输出了第 4 页。

如果我单击后退按钮,它会起作用,您可能知道 - Chrome 会在单击第二个鼠标按钮后显示所有步骤。所以这里发生了这个问题。

谢谢你。

你可以在这里试试 http://demo.ajax-cart.com/

点击 1. 测试类别 2. 品牌 3. 博客 4. 关于 5. 新闻

使用返回按钮返回“我们的博客” - 您将看到“品牌”。

0 投票
1 回答
457 浏览

javascript - 使用 replaceState 时不会触发 onpopstate 事件

在我的应用程序中,当用户通过导航栏导航到页面时,它会将其内容加载到 iframe 中。iframe 正在向历史推送一个新条目,我也想在我的地址上反映 url,所以我习惯history.replaceState这样做。问题是,当我尝试收听 window.onpopstate 时,在浏览器中单击后退和前进时不会触发事件。父应用程序是 Angular 5 应用程序,而 iframe 内的子应用程序也是 Angular 5 应用程序。知道在这种情况下为什么以及如何触发 onpopstate 事件吗?

谢谢!

0 投票
0 回答
461 浏览

javascript - window.history.pushState 未推送状态,因此无法在 window.popstate 事件回调中检索

我面临一个问题,我在history.pushStateapi 中设置数据,如下所示:

routeInfo当针对相同的 url 触发 popstate 时,我期望在我的状态下存在相同的对象

e.state没有routeInfo对象,e.state正在返回不同的东西,如下所示

您能否让我知道出了什么问题,为什么没有为给定的 url 保留状态,以及如何检索它?我正在使用 Chrome 浏览器。

0 投票
0 回答
127 浏览

javascript - 如何使用 popstate 捕获 URL 更改?

我想在本地站点上捕获 URL 更改,例如:

http://myexample.com/

更改为:

http://myexample.com/foobar

我可以拦截更改并foobar使用 AJAX 加载。

所以我写了这个:

当我测试时,我得到了这个事件:

但如果我这样做:

我的浏览器仍然向服务器发出请求以加载 foobar,当然我收到 404 错误。

我怎样才能解决这个问题?