jQuery有一个很棒的用于更改浏览器URL的插件,称为jQuery-pusher。
JavaScript pushState
和jQuery可以一起使用,例如:
history.pushState(null, null, $(this).attr('href'));
例:
$('a').click(function (event) {
// Prevent default click action
event.preventDefault();
// Detect if pushState is available
if(history.pushState) {
history.pushState(null, null, $(this).attr('href'));
}
return false;
});
仅使用JavaScript history.pushState()
(会更改引荐来源网址),该网址会在更改状态后创建的XMLHttpRequest对象的HTTP标头中使用。
例:
window.history.pushState("object", "Your New Title", "/new-url");
pushState()方法:
pushState()
具有三个参数:状态对象,标题(当前被忽略)和(可选)URL。让我们更详细地检查这三个参数:
状态对象 —状态对象是一个JavaScript对象,与通过创建的新历史记录条目相关联pushState()
。每当用户导航到新状态时,都会触发popstate事件,并且该事件的state属性包含历史记录条目的状态对象的副本。
状态对象可以是任何可以序列化的对象。由于Firefox将状态对象保存到用户的磁盘上,以便用户重新启动浏览器后可以将其还原,因此我们对状态对象的序列化表示施加了640k个字符的大小限制。如果将序列化表示形式大于此值的状态对象传递给pushState()
,则该方法将引发异常。如果您需要更多空间,建议您使用sessionStorage和/或localStorage。
title -Firefox当前会忽略此参数,尽管将来可能会使用它。在此处传递空字符串应该可以防止将来对方法的更改。另外,您可以为要移动的州传递简短的标题。
URL-新历史记录条目的URL由此参数指定。请注意,浏览器不会在调用之后尝试加载此URL pushState()
,但可能会稍后尝试加载URL,例如,在用户重新启动浏览器之后。新的URL不必是绝对的。如果是相对的,则相对于当前URL进行解析。新网址必须与当前网址具有相同的来源;否则,pushState()
将引发异常。该参数是可选的。如果未指定,则将其设置为文档的当前URL。