Как динамически изменить HTML-код страницы?

Question

До сих пор я считал, что HTML-код страницы не может быть изменен без полной перезагрузки. Я подозреваю, что то, что я только что видел, так или иначе связано с pushState (но не только): на веб-сайте Quartz (qz.com) вы плавно переходите к следующей статье, как только вы достигнете нижней части той, чтение, с чистым обновлением URL-адреса и, что удивительно, обновленным источником HTML.

Для примера, прокрутите любую статью, например .: http://qz.com/643497/we-are-witnessing-the-rise-of-global-authoritarianism-on-a-chilling-scale/

Может быть, я что-то пропустил, но может кто-нибудь объяснить, как это делается? Какие API-интерфейсы HTML5 используются здесь?

ПРИМЕЧАНИЕ: Мой вопрос конкретно направлена ​​на обновление содержания HTML, которые вы можете увидеть при отображении исходного кода страницы (а не инспектор DOM, очевидно).

Answer 1

Это очень похоже на типичную загрузку асинхронного контента, но да, они используют pushState для изменения URL-адреса. То, что мне кажется, я считаю фактом, что маршруты хорошо разработаны, так что переход к этому URL-адресу дает вам эту же статью в первую очередь. Однако за кулисами это всего лишь серия запросов JSONP в сочетании с pushState(), чтобы дать хороший поток, хорошо сформированный документ. Вы даже можете проверить запросы, используя вкладку сети любой современной консоли отладки.

Смотрите этот ответ для информации об использовании PushState для обновления URL: Modify the URL without reloading the page

EDIT

Поскольку вы застрять на самом деле о том, как источник меняется, думаю, об этом так: Когда я говорю «маршруты хорошо разработаны, так что переход к этому URL-адресу дает вам ту же самую статью сначала». Я имею в виду, что переход на эту страницу будет отражать эту статью. Все, что вы делаете, просматривая источник, принимает активный URL (измененный pushState, поэтому вы действительно переходите на другую страницу для извлечения источника) и захватываете текст без разбора/рендеринга DOM. Надеюсь, что это разъяснит, что происходит на этом сайте в частности.

Answer 2

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

Настоящая статья, которую я прочитал (опубликовано 10 июля 2010 г.): (HTML5: Changing the browser-URL without refreshing page).

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

вы можете сделать это:

window.history.pushState ("объект или строка", "Название", "/ нового URL");