有没有办法在不刷新页面的情况下更改浏览器的地址栏? [英] Is there a way to change the browser's address bar without refreshing the page?

问题描述

我正在开发一个网络应用.在其中我有一个称为类别的部分，每次用户单击其中一个类别时，更新面板都会加载适当的内容.

I'm developing a web app. In it I have a section called categories that every time a user clicks one of the categories an update panel loads the appropriate content.

在用户点击类别后，我想将浏览器的地址栏 url 更改为

After the user clicked the category I want to change the browser's address bar url from

www.mysite.com/products 

像

www.mysite.com/products/{selectedCat} 

无需刷新页面.
我可以使用某种 JavaScript API 来实现这一点吗?

without refreshing the page.
Is there some kind of JavaScript API I can use to achieve this?

推荐答案

使用 HTML5，您可以在不重新加载的情况下修改 url:

With HTML5 you can modify the url without reloading:

如果您想在浏览器的历史记录中发布新帖子(即后退按钮有效)

If you want to make a new post in the browser's history (i.e. back button will work)

window.history.pushState('Object', 'Title', '/new-url');

如果您只是想更改网址而无法返回

If you just want to change the url without being able to go back

window.history.replaceState('Object', 'Title', '/another-new-url');

该对象可用于ajax导航:

The object can be used for ajax navigation:

window.history.pushState({ id: 35 }, 'Viewing item #35', '/item/35');

window.onpopstate = function (e) {
  var id = e.state.id;
  load_item(id);
};

在此处阅读更多信息:http://www.w3.org/TR/html5-author/history.html

后备解决方案:https://github.com/browserstate/history.js

这篇关于有没有办法在不刷新页面的情况下更改浏览器的地址栏?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！