Question

曾几何时，生活很简单：所有网页的长度都有限，如果它们不适合当前的窗口/视图大小，你只需向下滚动直到到达页面底部。

但我最近注意到网页设计界有一个新趋势：无底网页。

利用此类网页的网站最熟悉的例子可能是Facebook和Twitter：您滚动到“底部”，只是为了触发一些刷新，为页面添加内容，因此“旧底部”不再是底部和相反，有一个新的“底部”。

在Android WebView中，我需要能够捕获该“页面”上当前可用的所有内容，但我不确定如何处理此问题：

模拟用户通过View.scrollBy(int x, int y)，pageDown()或window.scrollTo()向下滚动？

或者是否有一种API方法可以自动执行此操作？

或者我接近这个完全错误，我不应该试图在一次捕获中找到“真正的底部”（如果可能的话）？

编辑：似乎标记此问题javascript传达了相反的信息。我有兴趣使用 Java 在Android的WebView上捕获（然后处理）这些无底页面。

Answer 1

编辑：忽略这个答案，我误解了这个问题。留下答案以防其他人误解了这个问题。

您可以使用jqPageFlow jQuery plugin，也可以自己编写文档。

Infinite scroll是另一个不错的选择。

Answer 2

这个jQuery插件就是这样做的： http://www.webresourcesdepot.com/load-content-while-scrolling-with-jquery/

另一个，用jQuery和PHP： http://www.9lessons.info/2009/07/load-data-while-scroll-with-jquery-php.html

Answer 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选择器更改为您要查找的内容即可。那你应该没问题。它很冗长，但也很轻松。

Answer 4

无论您使用何种语言，解决方案都非常简单。您只需捕获用户的行为（通过捕获当前y并将其与页面的最大值进行比较），然后您必须通过异步连接向您的内容添加一些新信息。就这些。不太了解Java所以我只能给出一个提示，但所有技术/语言的想法都是一样的。

如何处理“无限”网页？

4 个答案: