问题标签 [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.
vue.js - 在 vuejs 上监听 onpopstate 事件
我对 Vue 很陌生,我试图弄清楚如何在 vuejs 上监听 onpopstate 事件以在它发生时启动特定功能。我浏览了路由器文档,但在 vue 上找不到 onpopstate 事件处理程序的等效项。
谢谢你的帮助,威尔
javascript - 历史记录 back() 按钮的行为与后退按钮不同
我希望每次用户单击后退按钮或调用 history.back() 时都会调用弹出状态事件。根据我的阅读,history.back() 相当于使用浏览器上的后退按钮。
我有一种情况,我在打开叠加层时将状态推送到历史堆栈,并在用户单击关闭按钮以关闭叠加层时调用 history.back()。这相当于单击后退按钮。
浏览器后退按钮始终正常工作——即它触发 popstate 事件,并正确执行我的自定义 popstatehandler。但是,history.back() 函数并不总是调用 popstate 事件(因此不会关闭覆盖)。
这表明两者之间存在一些内在差异,但我不知道那是什么!
只有当我通过单击链接在新选项卡中打开页面来打开相关页面时,才会出现这种神秘的错误行为。直接打开页面使 popstate 事件触发就好了。
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 似乎也不起作用。
有没有人有关于如何使这项工作的解决方案?
- 你能阻止 URL 在“popstate”事件中发生变化吗?
- 您能否以某种方式在“popstate”中重写历史记录以将 URL 更改回它在当前页面上的内容并保留先前的条目,如果您确实决定在接受模式后希望它通过?
- 其他一些我没有想到的解决方案?
我最初的想法是阻止“popstate”中的 URL 更改,然后让框架触发链接单击以加载新内容并在单击“是”时更改 URL,但我还没有找到这样做的方法。
谢谢!
javascript - 有没有办法访问除当前之外的其他 js 历史状态
假设我做了以下事情:
- 有没有办法在 onpopstate 回调中访问以前的状态(你要离开的那个)
- 有没有办法访问状态列表,例如。
[null, {foo:bar}, {foo:baz}]
javascript - Onpopstate 函数只工作一次
在我的网站上,当单击链接时,会运行一个 jQuery 函数,该函数使用 AJAX 加载内容并且一切正常。我希望能够使用浏览器中的后退按钮来加载最后一个 AJAX 请求。
当我单击后退按钮时,它会正确加载最后一个 AJAX 请求,但是当我再次按下它时,它只会加载相同的 AJAX 请求,而不是前一个。这是我的代码:
知道为什么这个功能只工作一次吗?谢谢
javascript - 与跨文档工作的 onpopstate 类似的事件是什么?
来自 Mozilla 文档:
每次活动历史条目在SAME DOCUMENT的两个历史条目之间发生变化时,都会向窗口发送一个popstate事件。
如果我需要在浏览上下文中收听跨文档的“会话历史记录更改”,我应该使用哪个窗口事件?
我正在编写一个 js 库,当用户使用后退/前进浏览器按钮时,它有助于跟踪导航。当用户从页面 B 导航到页面 A(向后)或页面 A 到页面 B(向前)时,库将记录。我已经使用“popstate”事件实现了对使用哈希的页面的跟踪,但是当用户从页面 A 导航到页面 B 时,此事件不起作用。
我已经查看了 pageshow/pagehide 事件,但它们也会在简单的页面加载时触发,而不仅仅是在“会话历史记录”更改时(即从历史记录中获取页面)。
我应该看什么才能知道“浏览器已查看会话历史记录以获取当前页面”?
javascript - Javascript pushState,onpopstate - 在〜10个状态之后 - 单击第5步(在后退按钮上)并输出第4步
用于 pushState 的代码
用于检查状态的代码
假设我访问了 10 个页面 - 当我单击第 5 页时,它在浏览器中显示了很好的标题。但由于某种奇怪的原因,它输出了第 4 页。
如果我单击后退按钮,它会起作用,您可能知道 - Chrome 会在单击第二个鼠标按钮后显示所有步骤。所以这里发生了这个问题。
谢谢你。
你可以在这里试试 http://demo.ajax-cart.com/
点击 1. 测试类别 2. 品牌 3. 博客 4. 关于 5. 新闻
使用返回按钮返回“我们的博客” - 您将看到“品牌”。
javascript - 使用 replaceState 时不会触发 onpopstate 事件
在我的应用程序中,当用户通过导航栏导航到页面时,它会将其内容加载到 iframe 中。iframe 正在向历史推送一个新条目,我也想在我的地址上反映 url,所以我习惯history.replaceState
这样做。问题是,当我尝试收听 window.onpopstate 时,在浏览器中单击后退和前进时不会触发事件。父应用程序是 Angular 5 应用程序,而 iframe 内的子应用程序也是 Angular 5 应用程序。知道在这种情况下为什么以及如何触发 onpopstate 事件吗?
谢谢!
javascript - window.history.pushState 未推送状态,因此无法在 window.popstate 事件回调中检索
我面临一个问题,我在history.pushState
api 中设置数据,如下所示:
routeInfo
当针对相同的 url 触发 popstate 时,我期望在我的状态下存在相同的对象
但e.state
没有routeInfo
对象,e.state
正在返回不同的东西,如下所示
您能否让我知道出了什么问题,为什么没有为给定的 url 保留状态,以及如何检索它?我正在使用 Chrome 浏览器。
javascript - 如何使用 popstate 捕获 URL 更改?
我想在本地站点上捕获 URL 更改,例如:
更改为:
我可以拦截更改并foobar
使用 AJAX 加载。
所以我写了这个:
当我测试时,我得到了这个事件:
但如果我这样做:
我的浏览器仍然向服务器发出请求以加载 foobar,当然我收到 404 错误。
我怎样才能解决这个问题?