更改浏览器中的 URL,而无需使用 JavaScript 加载新页面

我如何拥有可能对当前页面产生一些影响的JavaScript操作,但也会更改浏览器中的URL,因此如果用户点击reload或书签,则使用新的URL?

如果后退按钮可以重新加载原始URL,那也会很好。

我正在尝试在URL中记录JavaScript状态。


答案 1

如果您希望它在不支持的浏览器中工作,那么“旧”方法是设置片段标识符,这不会导致页面重新加载。history.pushStatehistory.popState

基本思想是将属性设置为包含您需要的任何状态信息的值,然后使用 window.onhashchange 事件,或者对于不支持的旧浏览器(IE < 8,Firefox < 3.6),定期检查哈希值是否已更改(例如使用)并更新页面。您还需要在页面加载时检查哈希值以设置初始内容。window.location.hashonhashchangesetInterval

如果您使用的是jQuery,则有一个hashchange插件,它将使用浏览器支持的任何方法。我相信还有其他库的插件。

需要注意的一件事是与页面上的id冲突,因为浏览器将滚动到具有匹配ID的任何元素。


答案 2

在 HTML 5 中,使用 history.pushState 函数。例如:

<script type="text/javascript">
var stateObj = { foo: "bar" };
function change_my_url()
{
   history.pushState(stateObj, "page 2", "bar.html");
}
var link = document.getElementById('click');
link.addEventListener('click', change_my_url, false);
</script>

和一个 href:

<a href="#" id='click'>Click to change url to bar.html</a>

如果要更改 URL 而不向后退按钮列表添加条目,请改用。history.replaceState