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

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

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

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

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

Теперь это можно сделать в 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 .

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

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

Подробнее об этом читайте здесь

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

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

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

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

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

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

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

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

parent.location.hash = "hello";

В современных браузерах и 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);
}

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

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

parent.location.hash = "hello";

а также:

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

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

Если вы пытаетесь разрешить пользователям делать закладки на страницы и делиться ими, и вам не нужен именно правильный 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);
}

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

Ниже приведена функция для изменения URL без перезагрузки страницы. Это поддерживается только для HTML5.

  function ChangeUrl(page, url) {
        if (typeof (history.pushState) != "undefined") {
            var obj = {Page: page, Url: url};
            history.pushState(obj, obj.Page, obj.Url);
        } else {
            window.location.href = "homePage";
            // alert("Browser does not support HTML5.");
        }
    }

  ChangeUrl('Page1', 'homePage');

Любые изменения локона (или, window.locationили document.location) вызовут запрос на этот новый URL, если вы не просто меняете фрагмент URL. Если вы измените URL, вы измените URL.

Используйте серверные методы перезаписи URL, такие как mod_rewrite в Apache, если вам не нравятся URL, которые вы используете в данный момент.

Вы можете добавить якорные теги. Я использую это на своем сайте, чтобы с помощью Google Analytics отслеживать, что люди посещают на странице.

Я просто добавляю метку привязки, а затем ту часть страницы, которую я хочу отслеживать:

var trackCode = "/#" + urlencode($("myDiv").text());
window.location.href = "http://www.piano-chords.net" + trackCode;
pageTracker._trackPageview(trackCode);

Как указал Томас Стьернегард Джеппезен, вы можете использовать History.js для изменения параметров URL, пока пользователь перемещается по ссылкам и приложениям Ajax.

С тех пор прошел почти год, и History.js вырос и стал более стабильным и кросс-браузерным. Теперь его можно использовать для управления историческими состояниями в HTML5-совместимых, а также во многих браузерах только для HTML4. В этой демонстрации вы можете увидеть пример того, как он работает (а также попробовать его функциональные возможности и ограничения).

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

Наконец, для всестороннего объяснения того, что может быть проблемами с использованием хешей (и hashbangs), проверьте эту ссылку Бенджамином Луптоном.

Используйте history.pushState()из HTML 5 History API.

Обратитесь к API истории HTML5 для более подробной информации.

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

function changeurl(url, title) {
    var new_url = '/' + url;
    window.history.pushState('data', 'Title', new_url);
    document.title = title;
}

Вы можете не только редактировать URL, но и обновлять заголовок вместе с ним.

Довольно полезно всем.