Як веб-сайти з новинами, наприклад, Forbes / Zdnet безперешкодно об'єднують одну веб-сторінку в іншу?

Якщо ви переходите до Напр .:

Коли ви перейдете до нижньої частини сторінки, завантажується нова історія новин, а URL-адреса мого Інтернет-браузера змінюється на URL-адресу цієї наступної історії новин. Тож мені було цікаво, як веб-сторінка може майже миттєво завантажити наступну веб-сторінку з майже незначною затримкою між сторінками. Вони, наприклад, попередньо завантажують веб-сторінку історії наступних новин, а потім завантажують веб-сторінку дуже швидко?

— zordman
джерело

Натисніть та утримуйте Endклавішу, і ви побачите затримку процесу завантаження.

— MonkeyZeus

Більш важливе питання - чому вони це роблять.

Відповіді:

Коротка відповідь полягає в тому, що код клієнта сторінки Javascript виявляє, коли ви переходите "занадто близько" до нижньої частини сторінки, і просить сервер отримати більше даних, коли це станеться.

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

Найсучасніший спосіб зробити це - використовувати функції модифікації історії HTML5 , які, як видається, використовуються цими сайтами.

— Іксрек
джерело

У вашому описі відсутній крок: де вони фактично змінюють історію, а також додають більше даних на сторінку. Що робить ваш «найсучасніший спосіб зробити це » свого роду ніяково, тому що це відноситься до процесу зміни історії, яка на самому ділі не отримати , згаданих у відповіді. (Граматично це стосуватиметься залишення решти сторінки без змін, або, можливо, додавання даних до сторінки, що, як правило, робиться за допомогою AJAX, і не може бути виконано за допомогою функцій модифікації історії HTML5.)

— KRyan,

То як щодо зміни URL-адреси, як це відбувається без примусового перезавантаження? Тому що на вашому посиланні, якщо ви перезавантажуєте "змінену сторінку" (наприклад /second), вона помиляється. Цього не відбувається з новинним сайтом ОП - вони точно змінюють URL-адресу, щоб ви могли їм поділитися.

— OJFord

@OlilieFord - це те, для чого потрібні матеріали з API API. history.pushStateі history.replaceStateдозволить вам змінити URL-адресу в адресному рядку, не відходячи від поточної сторінки. Це більш сучасна заміна старого хитрості зміни фрагмента URL-адреси ( #something), великою перевагою є те, що API API дозволяє висувати "справжні" URL-адреси, які сервер може брати участь в генеруванні, тоді як річ з фрагментами повинна повністю підтримуватися. з боку клієнта.

— варення

Ага гаразд. Але, як я вже сказав, демонстрація зламана, що бентежить.

— OJFord

З якоїсь причини демо-історія, з якою я був знайомий, була повністю зламана, коли з’явилося це питання, тому ця посилання була першою, яку я міг знайти, яка, здавалося, взагалі працює. Не соромтеся запропонувати кращу посилання.

— Іксрек

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

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

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

— Брайан
джерело

Зачекайте, DeviantArt вніс зміну історії в свої результати пошуку, тому ви можете фактично посилатися на / закладку / в іншому випадку записати певну сторінку? Це ... зовсім щось. Скільки часу певні результати залишатимуться на певній сторінці для певного запиту? Якщо ви закладаєте закладки, я б не очікував, що завтра побачу однакові результати на цій конкретній сторінці ... Я мушу пам'ятати, щоб це дослідити.

— KRyan

@KRyan він просто модифікує offsetпарам, який пропускає певну відстань у набір результатів. Оскільки порядок сортування за замовчуванням здається "популярним весь час", результати, ймовірно, дещо стабільні, але, безумовно, ні, якщо ви переключите порядок сортування на "найновіший" та шукаєте щось популярне.

— варення