Обновление адресной строки новым URL без хэша или перезагрузка страницы

646

Я либо мечтал о том, чтобы chrome (dev channel) реализовал способ обновления адресной строки через javascript (путь, а не домен) без перезагрузки страницы, или они действительно сделали это.

Тем не менее, я не могу найти статью, которую, как мне кажется, я прочитал.

Я сумасшедший или есть способ сделать это (в Chrome)?

ps Я не говорю о window.location.hash и др. Если вышеизложенное существует, ответ на этот вопрос будет неверным.

Дэвид Мердок
источник
3
Возможный дубликат изменения URL без перезагрузки страницы
Тобиас Кинцлер,
1
@tobiaskienzler Когда этот вопрос первоначально задавался в 2009 году, это было невозможно.
Дэвид Мердок
3
Конечно, нет. Но теперь это так, вопросы задают одинаково. Позор, что у другого есть устаревший ответ, принятый вами (я заметил) ... Знаете что? Давайте закроем все наоборот, никто не сказал, что «оригинал» должен быть более старым, на самом деле есть прецеденты
Тобиас Кинцлер
@tobiaskienzler, другой вопрос не имеет устаревшего принятого ответа.
Дэвид Мердок
2
@TobiasKienzler это вопрос 6 лет, почему вы должны беспокоиться об этом вопросе? Просто наслаждайтесь удивительным ответом и внедрите его в свое приложение. В течение 6 лет тысячи пользователей SO соглашались, что это удивительные вопросы, пожалуйста, оставьте все как есть.
Имам Ассидикки

Ответы:

876

Теперь вы можете сделать это в большинстве "современных" браузеров!

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

Для более глубокого изучения pushState / replaceState / popstate (он же HTML5 History API) см. Документы 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/… )
Зак Лисобей
11
Подсказка: вы также можете использовать относительные пути с этими функциями (например, ../new-urlили ../../new-url. Они, кажется, делают то, что вы ожидаете в Chrome, по крайней мере.
Mahn
157

Меняется только то, что после хеша - старые браузеры

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');

Попробуйте запустить их в консоли сейчас!

Pawel
источник
13
replaceStateбыло именно то, что мне нужно, спасибо за расширение оригинального ответа.
Чойлтон Б. Хиггинботтом
«Домен и протокол должны совпадать с оригиналом!» это препятствует тому, чтобы некоторый сайт рыбалки изменил адресную строку URL.
Рик
3
Вы не должны передавать абсолютный URL этой функции. Если вы это сделаете, вам, скорее всего, понадобится построить его динамически из текущей схемы, хоста и порта - это большая работа, когда вы можете просто сделать его относительным URL («foo.html» или даже «/foo.html»). ") и пусть браузер позаботится об этом.
DimeCadmium
1
@DimeCadmium хорошее упрощение. Обновлено.
Павел
history.replaceStateдобавить в историю в ff 66.0b1
azzamsa
33

Обновите ответ Davids, чтобы даже обнаружить браузеры, которые не поддерживают pushstate:

if (history.pushState) {
  window.history.pushState("object or string", "Title", "/new-url");
} else {
  document.location.href = "/new-url";
}
metamagikum
источник
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);
Кевин Мендес
источник
4
Хотя этот фрагмент кода может решить вопрос, в том числе объяснение действительно помогает улучшить качество вашего сообщения. Помните, что вы отвечаете на вопрос читателей в будущем, и эти люди могут не знать причин, по которым вы предлагаете код.
MaxiMouse
@MaxiMouse спасибо за ваше превосходство, я приму это к сведению.
Кевин Мендес