javascript - 如何在Phantomjs中注入(inject)jquery(js)？

Question

var steps=[];
var testindex = 0;
var loadInProgress = false;//This is set to true when a page is still loading

var webPage = require('webpage');
var page = webPage.create();
page.settings.userAgent = 'Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/44.0.2403.157 Safari/537.36';
page.settings.javascriptEnabled = true;
page.settings.loadImages = false;//Script is much faster with this field set to false
phantom.cookiesEnabled = true;
phantom.javascriptEnabled = true;

console.log('All settings loaded, start with execution');
page.onConsoleMessage = function(msg) {
    console.log(msg);
};
steps = [

    function(){
        console.log('Step 1 - Open Fb home page');
        page.open("https://www.facebook.com/login.php", function(status){

        });
    },

    function(){
        console.log('Step 3 - Populate and submit the login form');
        page.evaluate(function(){
            document.getElementById("email").value="xxxx@gmail.com";
            document.getElementById("pass").value="xxx";
            document.getElementById("login_form").submit();
        });
    },
    function() {
        page.render('homepage.png');
    },
    function(){
      page.open("https://www.facebook.com/settings", function(status){

      });
    },
    function() {
        page.render('settings.png');
    },
];

interval = setInterval(executeRequestsStepByStep,50);

function executeRequestsStepByStep(){
    if (loadInProgress == false && typeof steps[testindex] == "function") {
        //console.log("step " + (testindex + 1));
        steps[testindex]();
        testindex++;
    }
    if (typeof steps[testindex] != "function") {
        console.log("test complete!");
        phantom.exit();
    }
}


page.onLoadStarted = function() {
    loadInProgress = true;
    console.log('Loading started');
};
page.onLoadFinished = function() {
    loadInProgress = false;
    console.log('Loading finished');
};
page.onConsoleMessage = function(msg) {
    console.log(msg);
};

如何注入(inject)“https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js”并使用

$('#email').attr("value", "xxxx@gmail.com");

$('#pass').attr("value", "xxxx");

$('#login_form').submit();

我尝试了所有方法，但脚本无法工作。

Answer 1

您可以调用includeJs在您的页面对象上执行此操作，并在注入(inject)您想要执行的任何 JQuery 代码后将您的评估函数放入回调中。

此外，您还需要删除代码开头的用户代理。它的存在会阻止加载外部 JQuery javascript。您还需要增加传递给 setInterval 的时间。 50 毫秒不足以加载 JQuery、操作 DOM 和提交表单。为了安全起见，10 秒之类的时间听起来更实际。

function(){
    console.log('Step 3 - Populate and submit the login form');
    page.includeJs('https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js', function() {
      page.evaluate(function(){
        $('#email').attr("value", "xxxx@gmail.com");
        $('#pass').attr("value", "xxxx");
        $('#login_form').submit();
      });
    });



interval = setInterval(executeRequestsStepByStep, 10000);