Оновлення адресного рядка новою URL-адресою без хешу або перезавантаження сторінки


643

Я або мріяв про хром (канал розробок), який реалізує спосіб оновлення адресного рядка через javascript (шлях, а не домен) без перезавантаження сторінки, або вони дійсно зробили це.

Однак я не можу знайти статтю, яку, напевно, прочитав.

Я божевільний чи є спосіб це зробити (у Chrome)?

ps Я не говорю про window.location.hash та ін. Якщо вищесказане існує, відповідь на це питання не відповідає дійсності.



1
@tobiaskienzler Коли це питання спочатку було задано ще в 2009 році, це було неможливо.
Девід Мердок

3
Звичайно, ні. Але зараз так, питання задають те саме. Прикро, хоча інший має застарілу відповідь (ви, я помітив) ... Ви знаєте, що? Давайте закриємо навпаки, ніхто не сказав, що "оригінал" повинен бути старшим, насправді є прецеденти
Тобіас Кіенцлер

@tobiaskienzler, на інше питання немає застарілої прийнятої відповіді.
Девід Мердок

2
@TobiasKienzler - це 6-річне питання, чому ви повинні турбуватися цим питанням? Просто насолоджуйтесь чудовою відповіддю та застосуйте її у своїй заявці. Протягом 6 років тисячі користувачів ПС погоджувались, що це дивовижні питання, будь ласка, залиште його таким, яким воно є.
Імам Ассідікі

Відповіді:


874

Тепер це можна зробити в більшості "сучасних" браузерів!

Ось оригінальну статтю, яку я прочитав (опубліковано 10 липня 2010 р.): HTML5: Зміна URL-адреси браузера без оновлення сторінки .

Для більш поглибленого ознайомлення з pushState / substituState / popstate (він же API історії HTML5) див. Документи MDN .

TL; DR, ви можете це зробити:

window.history.pushState("object or string", "Title", "/new-url");

Дивіться мою відповідь на зміну URL-адреси, не перезавантажуючи сторінку, щоб ознайомитись із основними способами.


3
А, функціональність знаходиться в WebKit і вийшла кілька місяців тому < bugs.webkit.org/show_bug.cgi?id=36152 >. Приємна знахідка!
найстаршийлівінгбой

6
цим зараз користується github, а навігація по деревах
Валерій

1
@Vprimachenko: Так. І вони раз у раз ламають кнопку спинки.
Девід Мердок

Тепер це можна зробити в Chrome, Safari, FF4 + та IE10pp3 +! (З відповіді Девіда Мердока stackoverflow.com/questions/824349 / ... )
Заха Lysobey

11
Підказка: ви також можете використовувати відносні шляхи з цими функціями (наприклад, ../new-urlабо ../../new-url. Вони, здається, роблять те, що ви хотіли б принаймні в Chrome.
Ман

156

Зміна лише того, що є після хеш-старих браузерів

document.location.hash = 'lookAtMeNow';

Зміна повної URL-адреси. Chrome, Firefox, IE10 +

history.pushState('data to be passed', 'Title of the page', '/test');

Сказане додасть новий запис до історії, щоб ви могли натиснути кнопку Назад, щоб перейти до попереднього стану. Щоб змінити URL-адресу на місці, не додаючи новий запис до використання історії

history.replaceState('data to be passed', 'Title of the page', '/test');

Спробуйте запустити їх у консолі зараз!


13
replaceStateсаме це мені було потрібно, дякую за розширення оригінальної відповіді.
Choylton B. Higginbottom

"домен та протокол повинні бути такими ж, як оригінал!" це не дозволяє деяким риболовним сайтам змінити адресний рядок.
Рік

3
Ви не повинні передавати абсолютну URL-адресу цієї функції. Якщо це так, вам, швидше за все, потрібно буде динамічно будувати його з поточної схеми, хоста та порту - що дуже багато роботи, коли ви могли просто зробити його відносною URL-адресою ("foo.html" або навіть "/foo.html ") і дозвольте браузеру подбати про це.
DimeCadmium

1
@DimeCadmium приємне спрощення. Оновлено.
Павло

history.replaceStateдодати до історії в ff 66.0b1
azzamsa

33

Оновіть відповідь Девідса, щоб навіть виявити браузери, які не підтримують pushstate:

if (history.pushState) {
  window.history.pushState("object or string", "Title", "/new-url");
} else {
  document.location.href = "/new-url";
}

9
document.location.href перезавантажує сторінку
paullb

1
var newurl = window.location.protocol + "//" + window.location.host + window.location.pathname + '?foo=bar';
window.history.pushState({path:newurl},'',newurl);

3
Хоча цей фрагмент коду може вирішити питання, зокрема пояснення дійсно допомагає покращити якість вашої публікації. Пам’ятайте, що ви відповідаєте на запитання читачів у майбутньому, і ці люди можуть не знати причини вашої пропозиції щодо коду.
MaxiMouse

@MaxiMouse дякую за твій надурість, я зроблю це на увазі.
Кевін Мендес
Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.