JQuery 未包含在 PhantomJs 中

Question

我正在尝试将 jquery 与 phantomjs 一起使用。我尝试了一个独立的示例，它运行良好。这是我所做的：

  var page = require('webpage').create();
  page.open("http://www.phantomjs.org", function(status) {

    page.onConsoleMessage = function(msg) {
      console.log("message recvd: " + msg);
    };

    var result;

    page.includeJs("https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js", function() {
      console.log("loading jquery");
    });

    setTimeout(function() {
      page.evaluate(function() {
        console.log("$(\"title\").text() -> " + $("title").text());
      });
    }, 1000);
 }

这是我得到的输出：

loading jquery
message recvd: $("title").text() -> PhantomJS | PhantomJS

在上面的代码 sn-p 中，我在评估函数上使用了 setTimeout()，因为 includeJs() 会异步执行并且需要一些时间来加载 jquery。如果我不使用 setTimeout() 或使用较小的超时值，则不起作用。

但是，当我在我的应用程序中尝试相同的代码时，它不起作用。这是我所拥有的：

var baseSetup = function(guid, page, config, request, response) {
  /* enable the console output inside the callback functions */
  page.onConsoleMessage = function (msg) {
    console.log(guid + ": console msg: " + msg);
  };

  /* used for ignoring potential alert messages when evaluating js code */
  page.onAlert = function (msg) {
    console.log(guid + " (alert): alert msg: " + msg);
  };

  /* suppress the error messages */
  page.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.error(guid + ": " + msgStack.join('\n'));
  };
}

module.exports = function extractionDriver(responseFromUrl, responseToUser, page, request) {
  console.log(page.customHeaders['guid'] + ": extractionDriver, status = " + responseFromUrl.status);

  if(page.isLocalFile || responseFromUrl.status !== 0)
  {
    var viewportStr = page.customHeaders['viewportStr'];
    console.log(page.customHeaders['guid'] + ": Setting viewport size: " + viewportStr);
    var viewportObj = parseViewport(viewportStr);
    page.viewport = viewportObj;

    page.evaluate(function(w,h) {
      document.body.style.width = w + "px";
      document.body.style.height = h + "px";
    }, viewportObj.width, viewportObj.height);

    page.includeJs("https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js", function() {
      console.log("loading jquery");
    });

    setTimeout(function() {
      page.evaluate(function() {
        console.log("$(\"title\").text() -> " + $("title").text());
      });
    }, 1000);
  }

这是我在运行应用程序时看到的：

    d8db6045-a0e8-11e4-a619-6949593d958d: ERROR: ReferenceError: Can't find variable: $
TRACE:
-> phantomjs://webpage.evaluate(): 3
-> phantomjs://webpage.evaluate(): 4
-> phantomjs://webpage.evaluate(): 4

永远不会打印日志行“正在加载 jquery”，并且永远不会加载 jquery。

我尝试在 includeJs() 的回调中封装 evaluate() 函数，但这也不起作用（没有打印控制台日志）。

这里可能出了什么问题？如果我应该提供更多信息，请告诉我。

Answer 1

这就是为什么page.includeJs有一个回调，所以你可以把依赖jQuery的代码放在那里。当引用的 JavaScript 已经加载时调用回调。欢迎来到回调地狱之路上的另一个关卡。

我经历过一次，但由于某种原因这不起作用。解决方法是在includeJs 回调中设置一个全局变量，并使用waitFor 等待在includeJs 回调之外设置全局变量。

var _loadIndicator = false;
page.includeJs("https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js", function() {
  _loadIndicator = true;
});

waitFor(function check() {
  return _loadIndicator;
}, function onReady() {
  page.evaluate(function() {
    console.log("$(\"title\").text() -> " + $("title").text());
  });
}, 10000);

Answer 2

我只是遇到了麻烦，但我的错误是，我尝试了phantom.injectJs，而不是page.injectJs（混蛋）。然后，如果status 是success，把

page.injectJs('lib/jquery.min.js');

试试看

page.evaluate(function(){
    console.log($("body").length);
});