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

在上面的代码片段中,我在evaluate函数上使用了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

永远不会打印日志行"loading 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);