javascript - 如何在Twitter上使用CasperJS(PhantomJS)处理无限滚动/动态加载

试图处理Twitter上的无限滚动，即使我滚动到底部，页面似乎也没有加载动态内容。

我正在做一个快速测试，以查看内容是否使用以下代码加载：

casper.open('https://twitter.com/<account>', function() {
  this.evaluate(function() {
    window.scrollTo(0, document.body.scrollHeight);
  });
  this.capture('twitter-screenshot.png');
});

并且即使我将视口设置为casper.options.viewportSize = { width: 1400, height: 600 };，屏幕截图也似乎已加载了整个视口

我已经检查了实际浏览器上的关注者数量，CasperJS上的关注者数量与滚动到底部之前加载的初始数量完全相同。所以：


它不会触发滚动的动态加载，因为已加载了整个视口，因此没有滚动。
滚动未正确触发。
我完全想不到的东西


我已经了解到，屏幕快照功能实际上是对整个DOM进行屏幕截图，而实际上并不是当前视口的样子。我已经到了骑士/僵尸/卡斯珀/幻影的这一点，而且从来没有使滚动条能够正常工作。任何提示都会很棒。

编辑1：
在纯phantomJS上使用Vaviloff的代码，我仍然看到相同的错误。这是终端输出：

Writing twitter-1.png...
[1] top = 10064
Writing twitter-2.png...
[2] top = 10064
Writing twitter-3.png...
[3] top = 10064
Writing twitter-4.png...
[4] top = 10064
Writing twitter-5.png...
[5] top = 10064

我注意到只有twitter-1.png写入我的文件系统，并且高度非常长。在调用任何900之前，我的视口高度已设置为page.open()。

我应该补充一点，我已经在Windows 10和OSX Yosemite上通过npm安装了phantomJS 2.1.1进行了测试。

编辑2：
似乎有问题，因为我先登录了测试帐户。

编辑3：
如果登录Twitter，它将运行其他脚本，并且phantomJS不兼容，并抛出此错误TypeError: undefined is not a constructor (evaluating 't.canPlayType(e)')。这将杀死该页面上的所有JS。不知道如何解决这个问题。

最佳答案

PhantomJS具有本机滚动仿真：http://phantomjs.org/api/webpage/property/scroll-position.html

PhantomJS脚本中a very fine book中的一个示例，它打开一个Twitter页面，并向下滚动五个屏幕：

var webpage = require('webpage').create();
webpage.viewportSize = { width: 1280, height: 800 };
webpage.scrollPosition = { top: 0, left: 0 };
webpage.open('https://twitter.com/founddrama', function(status) {
  if (status === 'fail') {
    console.error('webpage did not open successfully');
    phantom.exit(1);
  }
  var i = 0,
      top,
      queryFn = function() {
        return document.body.scrollHeight;
      };
  setInterval(function() {
    var filename = 'twitter-' + (++i) + '.png';
    console.log('Writing ' + filename + '...');
    webpage.render(filename);
    top = webpage.evaluate(queryFn);
    console.log('[' + i + '] top = ' + top);
    webpage.scrollPosition = { top: top + 1, left: 0 };

    if (i >= 5) {
      phantom.exit();
    }

  }, 3000);
});

添加

用于调试脚本（尤其是page.onError）的回扣非常宝贵：

webpage.onConsoleMessage = function (msg) {
    console.log(msg);
};

webpage.onError = function (msg, trace) {
    var msgStack = ['ERROR: ' + msg];
    if (trace && trace.length) {
      msgStack.push('TRACE:');
      trace.forEach(function(t) {
        msgStack.push(' -> ' + t.file + ': ' + t.line + (t.function ? ' (in function "' + t.function +'")' : ''));
      });
    }
    console.log(msgStack.join('<br />'));
};

关于javascript - 如何在Twitter上使用CasperJS(PhantomJS)处理无限滚动/动态加载，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/42357697/