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

日志行＆＃34;加载jquery＆＃34;永远不会打印，永远不会加载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);
});

JQuery没有被包含在PhantomJs中

2 个答案: