Вопрос: Измените URL без перезагрузки страницы


Есть ли способ изменить URL-адрес текущей страницы без перезагрузки страницы?

Я хотел бы получить доступ к части до # хэш, если это возможно.

Мне нужно только изменить часть после домена, поэтому его не так, как будто я нарушаю междоменные политики.

 window.location.href = "www.mysite.com/page2.php";  // sadly this reloads

1766


источник


Ответы:


Теперь это можно сделать в Chrome, Safari, FF4 + и IE10pp4 +!

См. Ответ на этот вопрос для получения дополнительной информации: Обновление адресной строки с новым URL без хеша или перезагрузка страницы

Пример:

 function processAjaxData(response, urlPath){
     document.getElementById("content").innerHTML = response.html;
     document.title = response.pageTitle;
     window.history.pushState({"html":response.html,"pageTitle":response.pageTitle},"", urlPath);
 }

Затем вы можете использовать window.onpopstateдля обнаружения навигации назад / вперед:

window.onpopstate = function(e){
    if(e.state){
        document.getElementById("content").innerHTML = e.state.html;
        document.title = e.state.pageTitle;
    }
};

Для более глубокого изучения управления историей браузера см. эта статья MDN ,


1604



HTML5 представил history.pushState()а также history.replaceState()методы, которые позволяют добавлять и изменять записи истории, соответственно.

window.history.pushState('page2', 'Title', '/page2.php');

Подробнее об этом см. Вот


365



ПРИМЕЧАНИЕ. Если вы работаете с HTML5браузер, тогда вы должны проигнорировать этот ответ. Теперь это возможно, как видно из других ответов.

Невозможно изменить URLв браузере без перезагрузки страницы. URL-адрес представляет собой последнюю загруженную страницу. Если вы измените его ( document.location), то он перезагрузит страницу.

Одна очевидная причина заключается в том, что вы пишете сайт на www.mysite.comэто выглядит как страница входа в систему банка. Затем вы меняете строку url браузера, чтобы сказать www.mybank.com, Пользователь полностью не осознает, что они действительно смотрят на www.mysite.com,


94



Вы также можете использовать HTML5 replaceState если вы хотите изменить URL-адрес, но не хотите добавлять запись в историю браузера:

if (window.history.replaceState) {
   //prevents browser from storing history with each change:
   window.history.replaceState(statedata, title, url);
}

Это «сломало» функциональность кнопки «Назад». Это может потребоваться в некоторых случаях, например, в галерее изображений (где вы хотите, чтобы обратная кнопка возвращалась обратно на страницу индекса галереи, вместо того, чтобы перемещаться по каждому просматриваемому изображению), предоставляя каждому изображению свой собственный уникальный URL-адрес.


86



parent.location.hash = "hello";

73



Вот мое решение: (newUrl - это ваш новый URL-адрес, который вы хотите заменить текущим)

history.pushState({}, null, newUrl);

42



HTML5 replaceState является ответом, как уже упоминалось Vivart и geo1701. Однако он не поддерживается во всех браузерах / версиях. History.js обертывает функции состояния HTML5 и предоставляет дополнительную поддержку браузерам HTML4.


23



Before HTML5 we can use:

parent.location.hash = "hello";

and:

window.location.replace("http:www.example.com");

This method will reload your page, but HTML5 introduced the history.pushState(page, caption, replace_url) that should not reload your page.


20



If what you're trying to do is allow users to bookmark/share pages, and you don't need it to be exactly the right URL, and you're not using hash anchors for anything else, then you can do this in two parts; you use the location.hash discussed above, and then implement a check on the home page, to look for a URL with a hash anchor in it, and redirect you to the subsequent result.

For instance:

1) User is on www.site.com/section/page/4

2) User does some action which changes the URL to www.site.com/#/section/page/6 (with the hash). Say you've loaded the correct content for page 6 into the page, so apart from the hash the user is not too disturbed.

3) User passes this URL on to someone else, or bookmarks it

4) Someone else, or the same user at a later date, goes to www.site.com/#/section/page/6

5) Code on www.site.com/ redirects the user to www.site.com/section/page/6, using something like this:

if (window.location.hash.length > 0){ 
   window.location = window.location.hash.substring(1);
}

Hope that makes sense! It's a useful approach for some situations.


16