JS页面滚动

前言

JavaScript技术大发展的今天，越来越多的网页都深入使用了JavaScript技术。在做爬虫的时候，请求的页面不一定是最终的看到的效果，可能需要再浏览器中执行一些脚本才能出现我们最终看到的页面。静态爬虫就无法爬取动态生成的页面。Phantomjs是一个无界面的浏览器，可以模拟浏览器去访问，如果需要执行脚本，也有相应的接口。

Selenium 是目前用的最广泛的Web UI 自动化测试框架。selenium-java是selenium的一个java包，相关知识可以自行百度。selenium-java可以支持日常使用的几乎所有类型的浏览器，另外，还支持Phantomjs和htmlunit。以Phantomjs为例，说一下自己的使用情况。

使用Phantomjs解析页面的目的是预测到页面需要运行脚本，才能获取HTML源码的情况。如果是静态页面当然也可以用Phantomjs，但是访问速度不如其他工具。

Phantomjs解析动态页面一般要触发页面事件才能执行脚本，我遇到的情况跟微博访问的情况类似，需要不断的页面滚动才能不断的拿到数据。

代码示例

自己的一段简单的代码

var i=0;
var interval = window.setInterval(function(){
    i=i+768;
    window.scrollTo(0,i);
    if(i >= document.body.scrollHeight){
        btn = document.querySelector("XXX");
        if(btn)
            btn.click();
        else {
            clearInterval(interval);
            setTimeout(function(){
                window.scrollTo(0,document.body.scrollHeight);
            },1000);
        }
    }
},1500);

使用selenium-java的Phantomjs接口，直接运行上边的脚本，基本保证能滚动到页面底部，因为有的页面当滚动过快或者网站某些机制会在滚动到底部之前出现一个按钮，在上面配置上就可以了。

另一段代码

下面的一点代码是UI 测试之：保证页面滚动到底部提供的。

/**
 * 保证页面滚动到底部
 */
function scrollToBottom (callback) {

    var TIMES = 10  // 最多滚动10次，防止无限加载
        , INTERVAL = 600  // 每次滚动之间的间隔时间，太短有可能不会触发懒加载事件
        , delta = 1500    // 每次的滚动距离，太长有可能导致之间有的部分未加载
        , preScrollTop = 0  // 滚动前的 window.scrollTop 值
        , curScrollTOp = 0;  // 滚动后的 window.scrollTop 值

    var scroll = function () {
        preScrollTop = $(window).scrollTop();
        TIMES --;
        $(window).scrollTop(preScrollTop + delta);
    };

    scroll();

    var timer = setInterval(function () {

        curScrollTOp = $(window).scrollTop();

        if (TIMES <= 0 || (curScrollTOp - preScrollTop) <= 3 ) {
            // 滚动结束
            clearInterval(timer);
            return callback();
        }

        scroll();

    }, INTERVAL);

}

使用这段代码的话，需要显式的调用函数，才会触发页面执行动作。

PS:如果一个动态页面，不需要滚动，但需要触发一下，才能获得源码，可以执行一句永远不会出错的脚本，比如document.getElementsByTagName('html')[0]

参考

UI 测试之：保证页面滚动到底部