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

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

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

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

 window.location.href = "www.mysite.com/page2.php";  // Sadly this reloads
+2170
источник поделиться
20 ответов

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

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

+1893
источник

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

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

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

+508
источник

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

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

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

+116
источник

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

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

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

+103
источник

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

history.pushState({}, null, newUrl);
+84
источник
parent.location.hash = "hello";
+79
источник

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

+25
источник

В современных браузерах и HTML5 в окне history есть метод с именем pushState. Это изменит 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);
}
+23
источник

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

parent.location.hash = "hello";

и

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

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

+21
источник

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

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

+20
источник

Ниже приведена функция для изменения 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');
+14
источник

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

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

+12
источник

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

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

var trackCode = "/#" + urlencode($("myDiv").text());
window.location.href = "http://www.piano-chords.net" + trackCode;
pageTracker._trackPageview(trackCode);
+12
источник

Как указано Thomas Stjernegaard Jeppesen, вы можете использовать History.js для изменения параметров URL, пока пользователь перемещается по вашим ссылкам и приложениям Ajax,

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

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

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

+8
источник

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

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

+7
источник

Теперь вы можете сделать это в большинстве "современных" браузеров!

1) Вот оригинальная статья: -

HTML5: изменение URL-адреса браузера без обновления страницы.

см. документы MDN.

Вы можете сделать это:

window.history.pushState("object or string", "Title", "/new-url");
+6

Возможно, без использования хэшей, посмотрите на asual jQuery Address plugin:

Пример здесь.

Обратите внимание, что он будет использовать хэши в IE, для этого нет обходного пути.

+4
источник

Использование:

    let stateObject = { foo: "bar" };
    history.pushState(stateObject, "page 2", "newpage.html");

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

-4
источник

Используйте window.history.pushState("object or string", "Title", "/new-url"), но он все равно отправит новый запрос URL на сервер.

-6
источник

Предполагая, что вы не пытаетесь сделать что-то злонамеренное, все, что вы хотели бы сделать с вашими собственными URL-адресами, может быть вызвано магией htaccess.

-12
источник

Посмотрите другие вопросы по меткам или Задайте вопрос