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');
});

我注意到只有

twitter-1.png

被写入我的文件系统，而且它的高度非常长。在调用任何

page.open（）

之前，我的视口高度设置为

900

我应该补充一点，我已经在

windows10

和

osxyosemite

上测试了通过npm安装的phantomJS

2.1.1

编辑2: 似乎有问题，因为我已首先登录到我的测试帐户

编辑3:

---

如果您登录twitter，它会运行其他脚本，phantomJS不兼容并抛出此错误

TypeError:undefined不是构造函数（评估't.canPlayType（e）'）

。这将杀死页面上的所有JS。不知道如何解决这个问题。

PhantomJS有本机滚动模拟：

PhantomJS脚本中的一个示例，打开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);
});

已添加

用于调试脚本的Calbacks，尤其是

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 />'));
};   

webpage.onConsoleMessage=function（msg）{
控制台日志（msg）；
};   
webpage.onError=函数（消息，跟踪）{
var msgStack=['ERROR:'+msg]；
if（trace&&trace.length）{
msgStack.push（'TRACE:'）；
trace.forEach（函数（t）{
msgStack.push（“->”+t.file+”：“+t.line+（t.function？”（在函数“+t.function+”）：”）中）；
});
}
console.log（msgStack.join（“
”）；
};   

谢谢。我相信我试过了，但似乎不起作用。但是让我用你的代码再试一次。另外，

webpage.render

不会截取整个DOM的屏幕吗？所以每个截图看起来都一样。我在所有截图上都注意到，

viewportSize

没有任何作用/cc@Vaviloff昨天在发布前检查，工作正常，滚动功能正常。PhantomJS版本2.1.1。使用你的代码，有些奇怪，我会用结果更新上面的描述，因为格式更容易看到。是的，截图会很长，因为PhantomJS呈现整个页面的高度，这是由程序的设计决定的。屏幕截图的高度会有所不同，因为不同的tweet具有不同的高度。编辑1请添加

页面。OneError

回调以检查错误。编辑3可能是另一个问题的问题。

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 />'));
};