javascript - строке - редактировать url js




Измените URL без перезагрузки страницы (13)

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

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

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

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

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

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

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

Подробнее об этом читайте here


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

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

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

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

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

parent.location.hash = "hello";

а также:

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

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


Если то, что вы пытаетесь сделать, это позволить пользователям добавлять закладки / обмениваться страницами, и вам не нужно, чтобы это был именно правильный URL-адрес, и вы не используете хэш-привязки для чего-либо еще, тогда вы можете сделать это в двух части; вы используете описанное выше location.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);
}

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


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


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

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

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

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


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

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


Это возможно без использования хешей, посмотрите на дополнительный модуль jQuery Address :

Пример here .

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


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

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

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


parent.location.hash = "hello";




friendly-url