问题标签 [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 投票
2 回答
2179 浏览

symfony - 我可以轻松实现自己的 Symfony2 注释吗?

Symfony 注释模块中有什么东西可以让我将它们用于其他用途吗?

我知道@Route并且@Method您需要扩展现有的库,所以我猜这并不容易。

目前,我正在使用 JS History API,并希望将popState我的 JS 文件的数据放在注释中。因此,当路由生成 URL 时,它们已经可用。

:这里有一个 HTML5 带注释的标题或某些属性是否有意义?如果能够在已经存在的路线名称和内容旁边定义这些数据,就像注释一样,那就太好了。

Q之前有没有人对注释进行过调整?

我想在这里澄清我的意图,因为我认为我遗漏了一些关键细节(提到历史 API)来理解我的用例。

有一些 SPA 前端通过前端包集成,并且通过 AJAX 调用连接到后端包,这是一个直接的 RESTful API,并添加了一个非常有趣的开发 PHP API 类 I以直接执行其他 PHP 类控制器“方法”的方式解释和处理(路由)AJAX。

我为这个 Symfony 2 应用程序(fosjsrouter)使用了很多 ajax 来处理路由。因此,SPA click 事件不是触发路由和操作的 URL,而是触发 AJAX 到后端路由器,带有大量 JSON 有效负载,不限于 PHP 控制参数(类/方法/var 名称)和数据集。

好的,所以回到正轨;鉴于上述情况;在路由器的 JS 类对象端,在这里面我认为这是添加一些 JS History API 功能的最佳位置,(状态,后退按钮等)

如果调用了标志,则可以调用上述类history,该标志可以负责分配初始状态数据。主要是因为这个 JS 方法中的 JSON 数据对象已经包含了很多关键的路由数据,以及后端 PHP 所需的该路由的参数信息,这些信息来自注释。

所以我的想法是,如果我将历史状态标题和 URL 的可访问性添加到注释中,那么我将可以访问该信息以定义初始状态,如果已标记,就在 anajax.done()内,在这个主要的 JS 路由方法内.

现在我们可以在数据库和实时客户端异步之间来回传递状态两种方式。您可以从前端使用观察者或任何东西,并在后端使用作业/队列来保持其完全反应性。(也使用 React :-))

编辑我不太确定这就是我的想法,看起来它让我在 PHP 函数的 return 语句中设置titleand的值url,我希望在注释中设置它(参见 return 'Matthias Noback';

所以我正在尝试这个,但我在哪里设置这些标题?

我想将它设置回此处,因此调用此路由的 ajax 可以访问它..(@historyApiTitle在此代码中查找,等等..)

Q那么看看这两个代码示例,我如何连接两者之间的点以使其工作?

0 投票
1 回答
1098 浏览

ember.js - 你怎么能听到 ember 路由变化?

如何在 ember 应用程序之外检测路由更改(# 或 popstate)?我试过这个但没有运气:他们从不开火

0 投票
0 回答
542 浏览

javascript - history.pushState() 状态对象是否意味着这样的事情?

我正在通过 AJAX 加载页面,最近阅读了关于history.pushStateonpopstate.

我并没有真正了解 state 对象参数的全部内容pushState,并且 MDN 上的页面仅给出了一个简单的对象作为示例。但是我想,嘿,我为什么不使用这个对象来存储 AJAX 响应 HTML 并在onpopstate触发时加载它呢?所以我正在做这样的事情:

在 XHR 状态 200/304(AJAX 成功)上

弹出状态

当然,这会加载可能已经更新的(旧)内容,这与您返回并获取浏览器缓存时类似,我猜。

在 MDN,它说该对象在其 JSON 表示中最多可以容纳 640k 个字符。

那么,状态对象是否意味着这样的事情?或者我应该在历史移动位置时再次强制重新加载/执行 AJAX 请求?

谢谢。

0 投票
2 回答
39823 浏览

javascript - window.onpopstate 不工作;当我导航回页面时没有任何反应

我正在尝试添加window.onpopstate我网站上的其中一个页面,但没有任何反应。我把这个脚本放在页面上:

我也试过:

但是,当我导航回该页面时,我没有收到任何警报。

0 投票
1 回答
1789 浏览

javascript - 有没有办法延迟 popstate 事件?

我尝试了一些方法来查看是否可以创建一个跨浏览器解决方案来延迟 popstate 事件,但没有任何运气。

任何人有任何想法或想法?

下面显然不起作用,但效果如下:

因此流程将遵循以下顺序:

  • 单击浏览器“后退”或“前进”按钮
  • 运行初始代码
  • 页面更改前的延迟
  • 换页
0 投票
0 回答
531 浏览

javascript - JavaScript中History对象(pushState、popState、ReplaceState)的含义

我想了解JavaScript (also History.pushState, History.PopState, ...) 中的History 对象。但除了以下链接,

https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Manipulating_the_browser_history

还有这个链接: http ://diveintohtml5.info/history.html

我在示例用法中找不到任何全面的东西。任何人都可以帮助我吗?

谢谢你的帮助

0 投票
2 回答
5624 浏览

javascript - 从历史中弹出最后一个状态

是否可以将最后一个状态的 html 推送到历史堆栈,如下所示:

更改窗口位置:

现在从新位置:

0 投票
0 回答
234 浏览

jquery - 使用 pushState/popState 操作浏览器历史记录时,退格会打乱页面转换

我在我的 ajax 网站上使用 pushstate/popstate,它工作正常,当我单击链接时,我使用以下过程:

哪个工作正常,但是当我按下退格键时,我很难阻止 URL 更改,我可以使用相同的程序来防止向退格键发送垃圾邮件,这不会触发我的页面转换,但无论我做什么,触发 url 更改,因此它会导致历史记录“不同步”,也就是不起作用。

我试图在退格上使用它:

正如我所说,这确实可以防止它被垃圾邮件发送,但它仍然会更改浏览器 URL,并搞砸一切。

tldr:是否有可能使退格正常工作,并防止它弄乱我操纵的浏览器历史记录,因为我在加载我的 ajax 内容时使用页面转换?

0 投票
1 回答
1725 浏览

javascript - 页面刷新后保留 pushState 历史记录

我一直在开发一个使用 AJAX 和浏览器历史 API 进行导航的网站。

我已经能够让导航为后退/前进按钮正常工作,但是在单击刷新按钮后出现问题。

由于我存储了一个默认状态和页面标题,当 popstate 事件为空时要在其中引用它,因此它会在页面重新加载时被覆盖。

例如,假设我的历史堆栈如下所示:

[索引,第 1 页,第 2 页]

如果我重新加载,在第 2 页上,默认状态变为第 2 页。因此,如果我要导航回来,它最终会这样做:

第 2 页 -> 第 1 页 -> 第 2 页

由于我的弹出式支架处理程序设置为在状态为空时转到默认页面。

我确信其他人已经遇到了这个问题,但我还没有找到任何明确的解决方案。大多数教程都将框架留给后退/前进,从不提及刷新引起的问题。

我不确定对此有什么好的解决方案。有任何想法吗?

0 投票
1 回答
568 浏览

javascript - Angular:$http.get() 仅每秒触发一次 onpopstate 触发器

我有一个 AngularJS 应用程序,它调用 API 并返回一堆数据,然后用户可以按标签过滤这些数据,以便在结果中获得更大的粒度。每次单击标签以过滤数据时,应用程序都会进行新的$http.get()调用,并使用适当的查询参数修改 URL,以便用户可以保存永久链接并返回到任何特定的数据集。

我正在尝试为应用程序提供适当的历史处理window.history.pushState(),并将每个历史对象的相关查询参数作为状态数据传递。我window.onpopstate用来检测何时单击后退/前进按钮,并使用它来使用$http.get()历史记录中的相关状态数据进行新调用。

出于某种原因,该函数仅每秒$http.get()触发一次,然后进行两次调用。几乎好像有一些缓存正在进行,但我一直无法找到罪魁祸首。这种行为在两个方向上持续存在,向后和向前,并且每隔一个事件就持续一次。我已经验证,对于添加/删除的每个标签,它只增加 1,状态数据正在成功发送,新的搜索查询正在正确组装,并且请求路径是正确的。只是没有开火。这是怎么回事?? popstatewindow.history.length

为了说明,行为流如下所示:

  • 加载页面在/default
    • 添加第一个标签: URL is /default&tags=a$http.get()返回新数据
    • 添加第二个标签: URL is /default&tags=a,b$http.get()返回新数据
    • 添加第三个标签: URL is /default&tags=a,b,c$http.get()返回新数据
    • 添加第四个标签: URL is /default&tags=a,b,c,d$http.get()返回新数据
  • 第一个后退按钮事件
    • window.onpopstate触发,URL 现在是/default&tags=a,b,c
    • 没有网络变化
  • 第二个后退按钮事件
    • window.onpopstate触发,URL 现在是/default&tags=a,b
    • $http.get()触发,发送网络请求以获取数据/default&tags=a,b,c
    • $http.get()再次触发,发​​送网络数据请求/default&tags=a,b
    • /default&tags=a,b载荷数据集
  • 第三个后退按钮事件
    • window.onpopstate触发,URL 现在是/default&tags=a
    • 没有网络变化
  • 第四个返回按钮事件
    • window.onpopstate触发,URL 现在是/default
    • $http.get()触发,发送网络请求以获取数据/default&tags=a
    • $http.get()再次触发,发​​送网络数据请求/default
    • /default载荷数据集

相关代码片段:

成功和错误事件都不会触发。我尝试使用$http.get().then().catch()它来查看是否可能发生其他事情,但由于某种原因,我的控制台中不断出现错误,提示这...catch()不是一个有效的功能,这本身就令人困惑。有任何想法吗?

谢谢!