如何处理“无限”网页？答案

【问题标题】：How to handle "infinite" web pages?如何处理“无限”网页？
【发布时间】：2011-05-26 21:31:08
【问题描述】：

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

但我最近注意到网页设计界出现了一种新趋势：无底网页。

使用此类页面的网站最熟悉的示例可能是 Facebook 和 Twitter：您滚动到“底部”，只是为了触发一些向页面添加内容的刷新，因此“旧底部”不再是底部，并且，取而代之的是一个新的“底部”。

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

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

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

或者我是否完全错误地处理了这个问题，我不应该尝试在一次捕获中达到“真正的底部”（如果可能的话）？

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

【问题讨论】：

我不清楚“该页面上当前可用的所有内容”在这种情况下是什么意思。如果页面是“无底的”，这是否意味着该页面上可能存在无限量的内容？或者您只是想触发一定数量的“加载更多内容”事件然后捕获它们？
@Sean McMains 是的，我只想触发一定数量的这些“加载更多内容”事件，然后捕获它们。 “无限”只是理论上的和/或比喻的：推特（和 Facebook）页面只能追溯到这么多时间。
但这不是重点。你可以持续任何时间。如果您想从这些服务中获取数据，请使用 twitters API 来获取某人的完整历史记录。这甚至不是一个好主意。我会用一个日期或一组项目来限制“更进一步”。
@Robert Massaioli 当然，如果我只想为 Twitter 做一些非常具体的事情，那你是对的。但我只拿了 Twitter 和 Facebook 作为例子。这种“无底”网站的数量像病毒一样传播...... :) 我希望从这里开始一个头脑风暴会议，讨论从 WebView 方面处理这个问题的创造性方法，但到目前为止我收到的唯一两个答案是如何对此类网站进行编程。 +1 建设性批评。

标签： java android webview android-webview

【解决方案1】：

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

您可以使用jqPageFlow jQuery plugin，或根据它的文档自行查找。

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

【讨论】：

我相信 OP 想要捕获无限滚动页面中的内容，而不是创建一个。
@zerocrates 你是对的。感谢和 + 1 更好地传达我的意图。

【解决方案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

【讨论】：

另一个：webdeveloperplus.com/jquery/…
我是否正确理解这些是针对创建这些页面的程序员，而不是试图捕获它们的 WebView？如果是这样，那么这实际上与我正在寻找的相反。
抱歉...误解了您要查找的内容。

【解决方案3】：

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

【讨论】：

【解决方案4】：

给定以下网页：

<!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 选择器更改为您要查找的内容。那么，你应该没事的。它很冗长，但性能也很轻。

【讨论】：

看起来很有希望，为漂亮的“演示文稿”+1。有人试过吗？我现在不能。 :-(
谢谢。我在本地对其进行了测试，用 Lorem Ipsum 填写了大量文章。
你有没有找到答案？