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

646

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

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

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

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

javascript ajax google-chrome

— Дэвид Мердок
источник

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 спасибо за ваше превосходство, я приму это к сведению.

— Кевин Мендес