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

Question

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

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

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

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

Answer 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');

Answer 2

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

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

Answer 3

Вы можете добавить якорные теги. Я использую это на своем сайте 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 4

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

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

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

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

Answer 5

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

Подробнее см. В HTML5 History API .

Answer 6

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

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

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

Answer 7

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

Answer 8

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