更改浏览器中的 URL,而无需使用 JavaScript 加载新页面
2022-08-30 00:03:05
我如何拥有可能对当前页面产生一些影响的JavaScript操作,但也会更改浏览器中的URL,因此如果用户点击reload或书签,则使用新的URL?
如果后退按钮可以重新加载原始URL,那也会很好。
我正在尝试在URL中记录JavaScript状态。
我如何拥有可能对当前页面产生一些影响的JavaScript操作,但也会更改浏览器中的URL,因此如果用户点击reload或书签,则使用新的URL?
如果后退按钮可以重新加载原始URL,那也会很好。
我正在尝试在URL中记录JavaScript状态。
如果您希望它在不支持的浏览器中工作,那么“旧”方法是设置片段标识符,这不会导致页面重新加载。history.pushState
history.popState
基本思想是将属性设置为包含您需要的任何状态信息的值,然后使用 window.onhashchange 事件,或者对于不支持的旧浏览器(IE < 8,Firefox < 3.6),定期检查哈希值是否已更改(例如使用)并更新页面。您还需要在页面加载时检查哈希值以设置初始内容。window.location.hash
onhashchange
setInterval
如果您使用的是jQuery,则有一个hashchange插件,它将使用浏览器支持的任何方法。我相信还有其他库的插件。
需要注意的一件事是与页面上的id冲突,因为浏览器将滚动到具有匹配ID的任何元素。
在 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