Как изменить 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 сайт, похожий на страницу входа в банк. Затем измените строку URL браузера, чтобы сказать www.mybank.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 есть метод 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 9

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

parent.location.hash = "hello";

и:

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

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

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/

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

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

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

Answer 11

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

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

Answer 12

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

Answer 13

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

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

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

Answer 14

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

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

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

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

Answer 15

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

Подробнее см. в API истории HTML5 .

Answer 16

Использовать:

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

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

Answer 17

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

Answer 18

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