如何操纵浏览器历史记录并捕获浏览器后退/前进按钮?

维克多

我一直在搜索几个小时,试图进行简单的浏览器历史记录操作。

我有几个菜单链接,并将单击处理程序绑定到它们。链接的href只是散列:href="#Home"href="#About"

当用户单击链接时,我想显示一个子页面,而无需重新加载页面和更改浏览器URL。

我也用pushState()尝试了这个基本示例,但是它不起作用:http ://jsbin.com/wecubizovu/1/edit?html,js,console

http://jsbin.com/wecubizovu

当我在Chrome中运行此代码时,我希望如果用户单击链接,他将在URL后面附加#asd,而popstate不会发生变化为什么会触发popstate?如何做到这一点,以便当用户单击链接时,将哈希附加到浏览器URL,当用户单击浏览器后退按钮时,我捕获该事件并显示所需的页面?

谢谢!

坚果

你的a元素具有href'',如果你不阻止默认动作仍在执行它,这在某种程度上打乱了你想做的事。将功能更改为

$("#asd").click(function(e) {
  e.preventDefault();
  alert("jo");
  window.history.pushState("", document.title, "#asd");
});

实现您想要的。

编辑:链接:http : //jsbin.com/sosozeteti

http://jsbin.com/sosozeteti/1/edit?html,js

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

如何使用浏览器后退/前进按钮浏览React状态更改历史记录

在浏览器的后退按钮上反应路由器历史记录

使用浏览器后退按钮vue.js的状态历史记录

浏览器何时记录历史记录?

完全禁用Chrome浏览器历史记录

ExtJS MVC的浏览器历史记录

JavaScript浏览器历史记录

使浏览器删除特定的历史记录状态

MVC注销浏览器历史记录

在redux中访问浏览器历史记录

浏览器历史记录需要DOM

浏览器历史记录和错误的地址

查看谷歌浏览器历史记录

通过浏览器全文搜索浏览器历史记录

手动添加浏览器历史记录条目(跨浏览器)

在浏览器页面中“横向移动”而不添加浏览器历史记录

Angular JS-如何强制浏览器记录历史记录以进行快速路由?

如何在java脚本中更改浏览器历史记录

如何检查用户是否可以返回浏览器历史记录

如何在 react shepherd 中访问浏览器历史记录

如何从Firefox的浏览器历史记录中删除输入的URL?

如何在浏览器历史记录中查找当前位置索引

如何在不更改浏览器历史记录的情况下更改url

如何从Google Chrome浏览器中删除旧的历史记录?

如何在Android Web浏览器中存储历史记录

如何在未登录浏览器历史记录的情况下转到路线

如何在Chrome浏览器中隐藏最近打开的历史记录?

如何停止清除浏览器控制台代码历史记录?

向后导航时如何跳过浏览器历史记录中的页面?