Как я могу изменить текущий URL?

101

У меня есть следующий код, который меняет страницы из JavaScript:

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

Но это не меняет верхний URL-адрес, поэтому, когда кто-то нажимает кнопку «Назад», он не возвращается на предыдущую страницу.

Как я могу заставить JavaScript изменить верхний URL-адрес, чтобы кнопка возврата в браузере работала.

javascript Леора
источник

Ответы:

39

Простое присвоение window.locationили window.location.hrefдолжно подойти:

window.location = newUrl;

Однако ваш новый URL-адрес заставит браузер загрузить новую страницу, но похоже, что вы хотите изменить URL-адрес, не покидая текущую страницу. Для этого есть два варианта:

  1. Используйте хеш URL. Например, вы можете перейти от example.comк example.com#fooбез загрузки новой страницы. Вы можете просто настроить, window.location.hashчтобы это было легко. Затем вы должны прослушать hashchangeсобытие HTML5 , которое будет запущено, когда пользователь нажмет кнопку возврата. Это не поддерживается в более старых версиях 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.

ячмень
источник
метод .replace для строк не изменит строку, к которой он был применен, он сгенерирует новую строку. " - window.location.replace()метод не совпадает с String.prototype.replace()методом, потому что window.locationне является строкой (это объект). window.location.replace()заменяет текущую URL-адрес новым, при этом старый URL-адрес перезаписывается в истории.
Энди Э,
1
Спасибо за исправление, я обновлю свой ответ соответственно.
bcherry
2
Оглядываясь назад, я могу сказать, что это, безусловно, лучший ответ. В document.location.href ничего нет на pushState
buley
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>
user3230794
источник