Як змінити URL-адресу, не завантажуючи сторінку?

Чи можна змінити URL-адресу поточної сторінки, не завантажуючи сторінку?

Я хотів би отримати доступ до порції до # хеша, якщо це можливо.

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

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

Тепер це можна зробити в 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 .

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

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

Детальніше про це читайте тут

Ви також можете використовувати HTML5 substituState, якщо ви хочете змінити URL-адресу, але не хочете додавати запис до історії браузера:

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

Це призведе до "порушення" функціональності кнопки "назад". Це може знадобитися в деяких випадках, наприклад, у галереї зображень (де ви хочете, щоб кнопка "Назад" поверталася назад на сторінку покажчика галереї, а не переміщувалася назад через кожне зображення, яке ви переглядали), надаючи кожному зображенню свою унікальну URL-адресу.

Ось моє рішення (newUrl - це ваша нова URL-адреса, яку ви хочете замінити на поточну):

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

ПРИМІТКА. Якщо ви працюєте з браузером HTML5, вам слід проігнорувати цю відповідь. Це зараз можливо, як видно з інших відповідей.

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

Очевидно, що ви пишете веб-сайт www.mysite.com, схожий на сторінку входу в банк. Потім ви змінюєте URL-адресу браузера, щоб сказати www.mybank.com. Користувач буде абсолютно невідомий, що він дійсно дивиться www.mysite.com.

parent.location.hash = "hello";

У сучасних браузерах та 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);
}

HTMLS substituState - це відповідь, про що вже згадували Vivart та geo1701. Однак він підтримується не в усіх браузерах / версіях. History.js перетворює функції стану HTML5 та надає додаткову підтримку браузерам HTML4.

Перед 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);
}

Сподіваюся, що це має сенс! Це корисний підхід для деяких ситуацій.

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

Будь-які зміни loction (або window.locationабо document.location) спричинить запит на цю нову URL-адресу, якщо ви не просто змінюєте фрагмент URL-адреси. Якщо ви змінюєте URL-адресу, ви змінюєте URL-адресу.

Використовуйте методи перезапису URL-адрес на стороні сервера, як-от mod_rewrite Apache, якщо вам не подобаються URL-адреси, які ви зараз використовуєте.

Можна додати теги прив’язки. Я використовую це на своєму сайті, щоб я міг відслідковувати за допомогою Google Analytics, що відвідують люди на цій сторінці.

Я просто додаю тег прив’язки, а потім частину сторінки, яку я хочу відстежувати:

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

Як вказував Томас Стєрнеґарда Джеппесен, ви можете використовувати History.js для зміни параметрів URL, в той час як користувач переходить по вашим посиланням та додаткам Ajax

З цього часу минуло майже рік, і History.js зростав та став стабільнішим та переглядачем. Тепер він може використовуватися для управління станами історії як у сумісних з HTML5, так і у багатьох браузерах, що лише HTML4. У цьому демонстраційному описі ви можете побачити приклад того, як це працює (а також можливість спробувати його функціональні можливості та межі.

Якщо вам потрібна допомога щодо використання та реалізації цієї бібліотеки, я пропоную вам поглянути на вихідний код демонстраційної сторінки: ви побачите, що це зробити дуже просто.

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

Використовуйте history.pushState()з API 5 API історії.

Докладніші відомості див. У API історії HTML5 .

Ви можете використовувати цю красиву і просту функцію, щоб так було в будь-якому місці вашої програми.

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

Ви можете не лише редагувати URL, але й оновлювати назву разом з нею.

Дуже корисно всім.