Питання Змінити URL-адресу без перезавантаження сторінки


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

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

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

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

1810
2018-05-05 10:54


походження


Ви можете зробити це в Flash. Вам просто потрібен невеликий додаток до фону та передайте ваш JavaScript у спалах, щоб змінити панель адреси. - Nick Berardi
Щоб полегшити розуміння питання, це, наприклад, Facebook, коли ви відкриваєте фотографію. Біржа URL-адрес змінюється на прямий вказівник на цю фотографію, тому ви можете ділитися URL-адресою без втрати місця, де ви перебуваєте на сайті. Запам'ятайте сайти на основі кадрування останнього десятиліття? Ви могли отримати лише URL-адресу домашньої сторінки, оскільки змінювалися лише внутрішні кадри. І це було жахливо. - Spidey


Відповіді:


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


1633
2017-07-28 15:30



Як Facebook робить це в IE7 тоді? - Dominic Tobias
@ CHiRiLo перевірити history.js який забезпечує резервне копіювання для веб-переглядачів, які не підтримують API історії HTML5. - David Murdoch
@infensus Якщо в URL-адресі є де-небудь # значок, цей трюк існує для років.. - Izkata
Що означає "pp4 +" частина "IE10pp4 +"? - Scott David Tesler
попередній перегляд платформи 4 - David Murdoch


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

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

Дізнайтеся більше про це з тут


382
2017-08-17 13:59



Може не працювати file:/// з міркувань безпеки, наприклад Firefox 30. Перевірте localhost з python -m SimpleHTTPServer. - Ciro Santilli 新疆改造中心 六四事件 法轮功
Я використовував це на codeigniter. - jned29
Очікується, що перший параметр буде об'єктом, а не просто рядком. - Alexis Wilke
ІМО це дійсно найкраща відповідь. Якщо все, що ви хочете зробити, це оновити поточну URL-адресу ({}, null, strNewPath) все, що вам потрібно зробити. Найкраще тестувати спочатку з if (history.pushState) {} - Craig Jacobs
ви можете просто ввести null для перших двох параметрів, якщо ви не хочете їх змінити. Ви також можете використовувати абсолютний URL для третього параметра. - Andrew


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

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

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


96
2018-05-05 10:57



Я не хочу змінювати домен, лише шлях і ім'я файлу. - Robinicks
Це все одно не припиняє потенційні ризики для безпеки, оскільки браузер не має уявлення про те, що користувач вважає "домен / mysite" та "домен / інший об'єкт" "безпечними". Може бути, має бути питання, чому ви хочете змінити URL-адресу? Якщо це потрібно затушувати його від користувача, ви можете просто запустити вашу програму в рамках iframe. - Robin Day
Ви можете зробити це за допомогою Flash. Це дозволить вам змінити URL-адресу без запиту. Це можливо тому, що Flash працює поза межами браузера, але дуже щільно з ним. - Nick Berardi
Я повинен сказати, що існують цілком виправдані причини для того, щоб змінити URL-адресу в клієнтському рядку адресного рядка. Наприклад, якщо у вас є таблиця даних з пейджинговою системою, сортування та фільтрації, і ви хочете, щоб ці елементи використовувались як Ajax, але все одно оновлюйте URL-адресу, щоб поточний стан сторінки було bookmarkable. Я можу зрозуміти ризики для безпеки, змінюючи ім'я домену (фішинг тощо), але чому веб-переглядачі не можуть дозволити лише частину URL-адреси справа від домену верхнього рівня бути модифікованими через сценарій? - Sunday Ironfoot
ця відповідь більше не відповідає дійсності 100%. Подивись мою відповідь на деталі. - David Murdoch


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

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

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


93
2017-11-19 10:32





parent.location.hash = "hello";

73
2018-05-13 22:14



Я хочу змінити URL-адресу, а не тільки хеш - #mydata - Robinicks
Зміна хешу може бути корисною в ajax, оскільки це свого роду стан, не використовуючи файли cookie, є bookmarkable і сумісні з кнопками назад. Gmail використовує цей сьогоднішній день, щоб зробити його більш зручним для перегляду веб-переглядача. - Matthew Lock
@ Ярвіс: у чому різниця? - noisy
@noisy Відстеження сторони на сервері не може бачити хеші, якщо він не надсилається безпосередньо до служби відстеження. - RedYetiCo
це не є корисним, якщо ви використовуєте структуру mvc, яка веде маршрути в хеш, наприклад, магістральні. - catbadger


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

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

45
2018-06-10 18:25



Найкраще тестувати спочатку з if (history.pushState) {} Тільки у випадку старого браузера. - Craig Jacobs
Це більше не спрацює у Firefox: операція є небезпечною. - kkatusic


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


25
2017-11-21 11:09





Перед HTML5 ми можемо використовувати:

parent.location.hash = "hello";

і:

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

Цей метод буде перезавантажувати вашу сторінку, але HTML5 представив history.pushState(page, caption, replace_url) що не слід перезавантажувати вашу сторінку.


20
2018-01-24 08:49



Проблема з history.pushState(..) є, що якщо ви хочете переспрямувати на інший домен, політика крос-домену набуває чинності. Поки з window.location.replace(..)можлива переадресація на інший домен. - OSWorX


Якщо щось, що ви намагаєтеся зробити, це дозволити користувачам робити закладки або обмінюватися сторінками, і вам не потрібно, щоб вона була точно правильною 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);
}

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


18
2018-04-19 11:43