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

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

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

 window.location.href = "www.mysite.com/page2.php";  // Sadly this reloads
2571
Robinicks 5 Май 2009 в 14:54

16 ответов

Лучший ответ

Теперь это можно сделать в 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.

1996
Peter Mortensen 17 Мар 2019 в 09:06

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

parent.location.hash = "hello";

И:

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

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

24
Patrioticcow 26 Фев 2015 в 22:34

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

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

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

106
Peter Mortensen 4 Ноя 2019 в 11:39

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

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

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

127
George Filippakos 4 Июн 2014 в 07:11

В современных браузерах и 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);
}
25
Peter Mortensen 17 Мар 2019 в 09:28

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

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

22
Brane 10 Янв 2018 в 12:10

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

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

13
Gumbo 5 Май 2009 в 10:58

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

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

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

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

9
Erenor Paz 5 Сен 2013 в 13:55

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

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

Подробнее об этом читайте в здесь

564
Jay Wick 29 Июл 2016 в 01:58

Вы можете использовать эту красивую и простую функцию, чтобы в любом месте вашего приложения.

function changeurl(url, title) {
    var new_url = '/' + url;
    window.history.pushState('data', 'Title', new_url);
    document.title = title;
}

Вы можете не только редактировать URL, но и обновлять заголовок вместе с ним.

Довольно полезно всем.

5
Dheeraj Thedijje 29 Ноя 2019 в 09:48

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

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

8
Peter Mortensen 17 Мар 2019 в 09:29

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

26
Thomas Stjernegaard Jeppesen 21 Ноя 2012 в 11:09

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

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

var trackCode = "/#" + urlencode($("myDiv").text());
window.location.href = "http://www.piano-chords.net" + trackCode;
pageTracker._trackPageview(trackCode);
11
Jean-François Fabre 19 Янв 2020 в 21:52

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

history.pushState({}, null, newUrl);
102
Peter Mortensen 17 Мар 2019 в 09:30

Ниже приведена функция для изменения 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');
17
Onur A. 9 Мар 2019 в 18:35
parent.location.hash = "hello";
81
Martin. 23 Мар 2013 в 17:57