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

Question

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

551

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

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

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

p.s. Я не говорю о window.location.hash, et al. Если выше существует ответ на этот вопрос, будет неверно.

David Murdoch 26 июль 2010, в 19:35

Источник

3

Возможно дублирование Изменить URL без перезагрузки страницы
Tobias Kienzler 24 авг. 2016, в 09:28
0

@tobiaskienzler Когда этот вопрос был задан в 2009 году, это было невозможно.
David Murdoch 24 авг. 2016, в 11:34
2

Конечно, нет. Но сейчас это так, вопросы задают одинаково. Позор, что у другого принят устаревший ответ (я заметил, что вы) ... Знаете что? Давайте закроем все наоборот, никто не сказал, что «оригинал» должен быть старше, на самом деле есть прецеденты
Tobias Kienzler 24 авг. 2016, в 11:45
0

@tobiaskienzler, другой вопрос не имеет устаревшего принятого ответа.
David Murdoch 24 авг. 2016, в 11:48
0

хорошо, не устаревший, но более сложный. Тем не менее, эти два вопроса кажутся мне практически одинаковыми, но, может быть, мне здесь не хватает нюанса ...
Tobias Kienzler 24 авг. 2016, в 11:56
2

@TobiasKienzler это вопрос 6 лет, почему вы должны беспокоиться об этом вопросе? Просто наслаждайтесь удивительным ответом и внедрите его в свое приложение. В течение 6 лет тысячи пользователей SO соглашались, что это удивительные вопросы, пожалуйста, оставьте все как есть.
Imam Assidiqqi 24 дек. 2016, в 09:43

Показать ещё 4 комментария

Теги:

javascript

ajax

google-chrome

3 ответа

126

Изменение только того, что после хэш-старых браузеров

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 01 сен. 2016, в 16:54

9

replaceState был именно тем, что мне было нужно, спасибо за расширение оригинального ответа.
meetalexjohnson 21 сен. 2016, в 23:07
0

«Домен и протокол должны совпадать с оригиналом!» это препятствует тому, чтобы некоторый сайт рыбалки изменил адресную строку URL.
Rick 26 сен. 2017, в 10:49
2

Вы не должны передавать абсолютный URL этой функции. Если вы это сделаете, вам, скорее всего, понадобится построить его динамически из текущей схемы, хоста и порта - это большая работа, когда вы можете просто сделать его относительным URL («foo.html» или даже «/foo.html»). ") и пусть браузер позаботится об этом.
DimeCadmium 17 июнь 2018, в 05:20
0

@DimeCadmium хорошее упрощение. Обновлено.
Pawel 17 июнь 2018, в 20:02
0

history.replaceState добавить в историю в ff 66.0b1
azzamsa 25 янв. 2019, в 18:09

Показать ещё 3 комментария

13

Обновление до ответа Дэвидса даже на обнаружение браузеров не поддерживает pushstate:

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

metamagicson 04 июль 2017, в 11:29

1

document.location.href перезагрузит страницу
paullb 29 июль 2017, в 05:29
3

@paullb это запасной вариант для старых браузеров, которые не поддерживают ни один способ без перезагрузки
Cœur 02 окт. 2017, в 16:35

Ещё вопросы

Возможно дублирование Изменить URL без перезагрузки страницы
@tobiaskienzler Когда этот вопрос был задан в 2009 году, это было невозможно.
Конечно, нет. Но сейчас это так, вопросы задают одинаково. Позор, что у другого принят устаревший ответ (я заметил, что вы) ... Знаете что? Давайте закроем все наоборот, никто не сказал, что «оригинал» должен быть старше, на самом деле есть прецеденты
@tobiaskienzler, другой вопрос не имеет устаревшего принятого ответа.
хорошо, не устаревший, но более сложный. Тем не менее, эти два вопроса кажутся мне практически одинаковыми, но, может быть, мне здесь не хватает нюанса ...
@TobiasKienzler это вопрос 6 лет, почему вы должны беспокоиться об этом вопросе? Просто наслаждайтесь удивительным ответом и внедрите его в свое приложение. В течение 6 лет тысячи пользователей SO соглашались, что это удивительные вопросы, пожалуйста, оставьте все как есть.
replaceState был именно тем, что мне было нужно, спасибо за расширение оригинального ответа.
«Домен и протокол должны совпадать с оригиналом!» это препятствует тому, чтобы некоторый сайт рыбалки изменил адресную строку URL.
Вы не должны передавать абсолютный URL этой функции. Если вы это сделаете, вам, скорее всего, понадобится построить его динамически из текущей схемы, хоста и порта - это большая работа, когда вы можете просто сделать его относительным URL («foo.html» или даже «/foo.html»). ") и пусть браузер позаботится об этом.
@DimeCadmium хорошее упрощение. Обновлено.
history.replaceState добавить в историю в ff 66.0b1
document.location.href перезагрузит страницу
@paullb это запасной вариант для старых браузеров, которые не поддерживают ни один способ без перезагрузки

David Murdoch · Accepted Answer · 2010-07-27T02-44-00.000Z

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

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

Для более глубокого изучения pushState/replaceState/popstate (он же HTML5 History API) см. Документы MDN.

TL; DR, вы можете сделать это:

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

См. Мой ответ на Изменение URL-адреса без перезагрузки страницы для ознакомления с основными инструкциями.

Ах, функциональность есть в WebKit и появилась несколько месяцев назад < bugs.webkit.org/show_bug.cgi?id=36152 >. Хорошая находка!
теперь он используется github, а навигация по дереву
@Vprimachenko: Да. И они время от времени ломают мою кнопку назад.
Теперь это можно сделать в Chrome, Safari, FF4 + и IE10pp3 +! (От ответа Дэвида Мердока до stackoverflow.com/questions/824349/… )
А как насчет IE9 и ниже? Есть ли похожие решения для них?
Там есть все виды взломов history там. См. Этот вопрос SO для получения дополнительной информации: stackoverflow.com/questions/2358928/…
возможность хранить объекты, связанные с историей, также прекрасна!
Подсказка: вы также можете использовать относительные пути с этими функциями (например, ../new-url или ../../new-url . Похоже, они делают то, что вы ожидаете в Chrome, по крайней мере.
Я хотел бы добавить, что window.replaceState намного проще в настройке и часто предпочтительнее, например, когда вы хотите обновить URL-адрес после того, как пользователь изменит значение какого-либо раскрывающегося списка или поля поиска. Если вы хотите использовать pushState , вам также необходимо правильно поддерживать событие onpopstate .