如何从JavaScript中更改页面

Question

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

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

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

如何让JavaScript更改顶部URL以及浏览器后退按钮的工作原理.

Answer 1

document.location.href = newUrl;

https://developer.mozilla.org/en-US/docs/Web/API/document.location

Answer 2

简单分配window.location或window.location.href应该没问题:

window.location = newUrl;

但是,您的新URL将导致浏览器加载新页面,但听起来您想要修改URL而不离开当前页面.你有两个选择:

1. 使用URL哈希.例如,您可以example.com在example.com#foo不加载新页面的情况下前往.你可以简单地设置window.location.hash这样做.然后,您应该收听HTML5 hashchange事件,当用户按下后退按钮时将触发该事件.在早期版本的IE中不支持这种功能,但请查看jQuery BBQ,它可以在所有浏览器中使用.

2. 您可以使用HTML5历史记录修改路径而无需重新加载页面.这将允许您从更改example.com/foo为example.com/bar.使用它很容易:

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

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

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

   不幸的是,这仅在非常现代的浏览器中支持,例如Chrome,Safari和Firefox 4 beta.

Answer 3

这将做到这一点：

window.history.pushState(null,null,'https://www.google.com');

Answer 4

嗯,我会用

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

我不确定这是不是你的意思.

Answer 5

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

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

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