Как новостные сайты, например, Forbes / Zdnet, легко объединяют одну веб-страницу в другую?

14

Если вы идете к примеру:

Когда вы переходите в конец страницы, загружается новая новость, а URL-адрес в моем интернет-браузере меняется на URL этой следующей новостной статьи. Поэтому мне было интересно, как веб-страница может почти мгновенно загрузить следующую веб-страницу с почти незначительной задержкой между страницами. Например, они предварительно загружают веб-страницу истории Next News, а затем действительно быстро загружают веб-страницу?

javascript web-development web-applications html websites zordman
источник
1
Нажмите и удерживайте Endклавишу, и вы увидите задержку процесса загрузки.
MonkeyZeus
5
Более важный вопрос - зачем они это делают?

Ответы:

25

Краткий ответ: код Javascript на стороне клиента обнаруживает, когда вы «слишком близко» подходите к нижней части страницы, и запрашивает у сервера дополнительные данные, когда это происходит.

Не становясь слишком техническими, они не перезагружают всю веб-страницу. Вместо этого код Javascript на этой странице запрашивает дополнительные данные с сервера, а затем, когда он получает новые данные, он добавляет эти данные на текущую страницу. Части страницы, которые не нужно менять, остаются полностью неизменными.

Самый современный способ сделать это - использовать функции изменения истории HTML5 , которые, по-видимому, и используются этими сайтами.

Ixrec
источник
4
В вашем описании отсутствует шаг: где они на самом деле меняют историю, а также добавляют дополнительные данные на страницу. Что делает ваш «самый современный способ сделать это » немного неловким, потому что это относится к процессу изменения истории, который фактически не упоминается в ответе. (Грамматически, это будет означать, что оставшаяся часть страницы останется неизменной, или, возможно, добавление данных на страницу, что обычно выполняется с помощью AJAX и не может быть выполнено с помощью функций изменения истории HTML5.)
KRyan
Так как насчет изменения URL, как это происходит без принудительной перезагрузки? Потому что по вашей ссылке, если вы перезагрузите «измененную страницу» (например /second), это приведет к ошибкам. Этого не происходит с новостным сайтом OP - они точно меняют URL, чтобы вы могли поделиться им.
OJFord
@OllieFord - это то, для чего предназначен API истории. history.pushStateи history.replaceStateпозволит вам изменить URL-адрес в адресной строке, не отходя от текущей страницы. Это более современная замена старой уловки изменения фрагмента URL ( #something), с большим преимуществом, заключающимся в том, что API истории позволяет выдвигать «реальные» URL, в которых сервер может участвовать, а фрагмент должен поддерживаться полностью. со стороны клиента.
Хоббс
Ах хорошо. Но, как я уже сказал, демо не работает, что сбивает с толку.
OJFord
По какой-то причине демо истории, с которым я был знаком, было полностью разбито, когда возник этот вопрос, так что эта ссылка была первой, которую я смог найти, которая, казалось, работала вообще. Не стесняйтесь предложить лучшую ссылку.
Ixrec
20

Один большой ключ к пониманию происходящего: через Javascript можно установить URL-адрес в адресной строке, фактически не перенаправляя пользователя. Чтобы увидеть это в действии, вставьте приведенный ниже код в консоль поддерживаемого браузера. Обратите внимание, что это меняет вашу адресную строку на http://programmers.stackexchange.com/yay.html.

history.pushState(null,null,'/yay.html')

Преимущество этого подхода состоит в том, что если пользователь делает закладки после прокрутки к истории, закладка будет знать, куда отправить пользователя. Бесконечная прокрутка результатов поиска DeviantArt - хороший пример такого поведения.

Брайан
источник
Подождите, DeviantArt реализовал изменение истории в своих результатах поиска, так что вы можете сделать ссылку на / bookmark / иначе записать определенную страницу? Это ... совсем что-то. Как долго конкретные результаты будут оставаться на определенной странице для определенного запроса, хотя? Если вы добавите закладку, я не ожидал бы увидеть такие же результаты завтра на этой конкретной странице ... Я должен помнить, чтобы исследовать это.
KRyan
@KRyan это просто изменяет offsetпараметр, который пропускает определенное расстояние в наборе результатов. Поскольку порядок сортировки по умолчанию кажется «популярным все время», результаты, вероятно, несколько стабильны, но определенно нет, если вы переключите порядок сортировки на «самый новый» и выполните поиск чего-то популярного.
Хоббс