如何更改当前网址?


100

我有以下代码可从JavaScript内更改页面:

var newUrl = [some code to build up URL string];
window.location.replace(newUrl);

但这不会更改顶部URL,因此当有人单击“后退”按钮时,它不会返回上一页。

如何让JavaScript更改顶部URL,以便浏览器后退按钮起作用。

Answers:



38

简单分配window.locationwindow.location.href应该可以:

window.location = newUrl;

但是,您的新URL将导致浏览器加载新页面,但这听起来像您想在不离开当前页面的情况下修改URL。您有两种选择:

  1. 使用URL哈希。例如,您可以从example.comexample.com#foo而不加载新页面。您可以简单地进行设置window.location.hash以简化此过程。然后,您应该收听HTML5 hashchange事件,该事件将在用户按下“后退”按钮时触发。较旧版本的IE不支持此功能,但请查看jQuery BBQ,它可以在所有浏览器中使用。

  2. 您可以使用HTML5历史记录来修改路径,而无需重新加载页面。这将使您从更改example.com/fooexample.com/bar。使用这个很容易:

    window.history.pushState("example.com/foo");

    当用户按下“后退”时,您将收到窗口的popstate事件,您可以轻松地收听(jQuery):

    $(window).bind("popstate", function(e) { alert("location changed"); });

    不幸的是,只有非常现代的浏览器(例如Chrome,Safari和Firefox 4 beta)才支持此功能。


字符串上的.replace方法不会更改它所应用的字符串,它会生成一个新字符串。” -该window.location.replace()方法与String.prototype.replace()方法不同,因为window.location它不是字符串(它是一个对象)。 window.location.replace()替换当前URL与一个新的,而在历史上覆盖旧的URL条目。
安迪·ê

1
感谢您的更正,我将相应地更新我的答案。
bcherry 2010年

2
回顾过去,这是最好的答案。document.location.href在pushState上没有任何内容
buley 2011年

7

嗯,我会用

window.location = 'http://localhost/index.html#?options=go_here';

我不确定这是否是您的意思。


7

如果您只想更新相对路径,也可以

window.location.pathname = '/relative-link'

"http://domain.com" -> "http://domain.com/relative-link"


0
<script> 
    var url= "http://www.google.com"; 
    window.location = url; 
</script> 
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.