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

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

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

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

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

18 ответов


Теперь это можно сделать в Chrome, Safari, FF4+ и IE10pp4+!

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

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

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


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

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

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


parent.location.hash = "hello";

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

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

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


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

parent.location.hash = "hello";

и:

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

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


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

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


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

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

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

современной - браузеры и HTML5 есть метод, называемый pushState в окне history. Это изменит URL-адрес и подтолкнет его к истории без загрузки страницы.

вы можете использовать его так, он будет принимать 3 параметра, 1) состояние объекта 2) название и URL):

window.history.pushState({page: "another"}, "another page", "example.html");

это изменит url, но не перезагрузит страницу, также не проверяет, существует ли страница, поэтому, если вы делаете некоторый код javascript, который реагирует на URL, вы можете работать с ними вот так.

есть history.replaceState() который делает то же самое, за исключением того, что он изменит текущую историю вместо создания новой!

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

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

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

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

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


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

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

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


использовать history.pushState() из HTML 5 История API

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


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


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