Как изменить URL-адрес без перезагрузки страницы?

Question

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

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

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

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

Answer 1

Теперь это можно сделать в Chrome, Safari, Firefox 4+ и Internet Explorer 10pp4 +!

См. Ответ на этот вопрос для получения дополнительной информации: Обновление адресной строки новым 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 .

Answer 2

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

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

Подробнее об этом можно узнать здесь

Answer 3

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

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

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

Answer 4

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

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

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

Answer 5

parent.location.hash = "hello";

Answer 6

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

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

Answer 7

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

Answer 8

До HTML5 мы можем использовать:

parent.location.hash = "hello";

и

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

Этот метод перезагрузит вашу страницу, но HTML5 представил history.pushState(page, caption, replace_url), который не должен перезагружать вашу страницу.

Answer 9

В современных браузерах и HTML5 существует метод, называемый pushState для окна history. Это изменит URL-адрес и добавит его в историю без загрузки страницы.

Вы можете использовать его следующим образом: 3) 1) состояние объекта 2) заголовок и URL):

window.history.pushState({page: "another"}, "another page", "example.html");

Это изменит URL, но не перезагрузит страницу. Кроме того, он не проверяет, существует ли страница, поэтому, если вы делаете некоторый код JavaScript, который реагирует на URL, вы можете работать с ними следующим образом.

Также есть history.replaceState(), который делает то же самое, за исключением того, что он изменит текущую историю вместо создания новой!

Также вы можете создать функцию, чтобы проверить, существует ли history.pushState, а затем продолжить с остальными, как это:

function goTo(page, title, url) {
  if ("undefined" !== typeof history.pushState) {
    history.pushState({page: page}, title, url);
  } else {
    window.location.assign(url);
  }
}

goTo("another page", "example", 'example.html');

Также вы можете изменить # на <HTML5 browsers, что не приведет к перезагрузке страницы. Так Angular использует SPA в соответствии с хэштегом ...

Изменение # довольно просто, например:

window.location.hash = "example";

И вы можете обнаружить это так:

window.onhashchange = function () {
  console.log("#changed", window.location.hash);
}

Answer 10

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

Например:

1) Пользователь включен www.site.com/section/page/4

2) Пользователь выполняет действие, которое изменяет URL-адрес на www.site.com/#/section/page/6 (с хешем). Допустим, вы загрузили на страницу правильный контент для страницы 6, поэтому кроме хеша пользователь не слишком обеспокоен.

3) Пользователь передает этот URL-адрес кому-либо другому или добавляет его в закладки

4) Кто-то другой или тот же пользователь позже, перейдет к www.site.com/#/section/page/6

5) Код www.site.com/ перенаправляет пользователя на www.site.com/section/page/6, используя что-то вроде этого:

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

Надеюсь, это имеет смысл! Это полезный подход для некоторых ситуаций.