Как обращаться с "бесконечными" веб-страницами?

Когда-то жизнь была простой: все веб-страницы имели конечную длину, и если они не вписывались в текущий размер окна/вида, вы просто прокручивали вниз, пока не достигнете нижней части страницы.

Но я недавно заметил, что в мире веб-дизайна существует новая тенденция: Бесконечные веб-страницы.

Вероятно, наиболее знакомыми примерами сайтов, использующих такие страницы, являются Facebook и Twitter: вы прокручиваете до "дна", только чтобы вызвать некоторое обновление, которое добавляет контент на страницу, поэтому "старое дно" больше не является дном и, вместо этого появляется новое "дно".

В Android WebView мне нужно уловить весь контент, доступный на этой странице, но я не уверен, как это сделать:

Имитировать прокрутку пользователя вниз с помощью View.scrollBy(int x, int y), pageDown() или window.scrollTo()?

Или существует метод API, который делает это автоматически для меня?

Или я подхожу к этому совершенно неправильно, и я не должен пытаться добраться до "реального дна" в одном захвате (если возможно вообще)?

РЕДАКТИРОВАТЬ. Похоже, что тегирование этого вопроса javascript передало противоположное сообщение. Мне интересно захватить (затем обрабатывать) такие бездонные страницы в Android WebView, используя Java.

ОТВЕТЫ

Ответ 1

Изменить: игнорировать этот ответ, я неправильно понял вопрос. Оставив ответ, если другие неверно понимают этот вопрос.

Вы можете использовать jqPageFlow jQuery плагин или основываться на своей документации.

Бесконечный прокрутка - еще один отличный вариант.

Ответ 3

С учетом следующей веб-страницы:

<!DOCTYPE HTML>
<html lang="en-US">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <!-- website code -->

    <!-- The endless articles you want to process -->
    <div class="article">

    </div>
    <div class="article">

    </div>
    <div class="article">

    </div>
    <!-- ... -->        
</body>
</html>

Здесь будет использоваться код:

(function($) {      // closure
    $(function() {  // when the document is ready
        var height      = $(this).height(), // get initial height
            lastEl      = null,                // track last element processed
            getData     =
                // this function will process the data as it comes in
                function() {
                    var $elements = $(".article");
                    // don't reprocess data
                    if(lastEl) { 
                        $elements = $elements
                            .slice($elements.index(lastEl)+1); 
                    }

                    lastEl = $elements
                        .each(function() {
                            // do what you want with the element
                        })
                        // save the last element processed
                        .get(-1) || lastEl; 

                    // finally, scroll to the bottom of the page
                    $(window).scrollTop($(document).height());
                };

        $(document).bind('DOMSubtreeModified', function() {
            var newHeight = $(this).height();
            if(newHeight != height) {
                height = newHeight;
                getData();
            }
        });
        getData();
    });
})(jQuery));

Просто измените селектор $elements на то, что вы хотите найти. Тогда вы должны быть в порядке. Это многословный, но также и свет производительности.

Ответ 4

Независимо от того, какой язык вы используете, решение довольно простое. Вы просто поймаете bechavior пользователя (путем захвата текущего y и сравнения его с максимальным количеством страницы), тогда вам нужно добавить новую информацию к вашему контенту, используя асинхронное соединение. Вот и все. Не знаю очень хорошо Java, поэтому я могу только дать подсказку, но идея во всех технологиях/языках одинакова.