如何在 Phantomjs 中注入 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);
};

How inject " https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js " and uses

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

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

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

I try all method, but script cant work.

Answer 1

You can invoke includeJs on your page object to do that and put your evaluate function inside the callback after injection with whatever JQuery code you want to execute.

Also, You will need to remove the user agent at the start of the code . It's presence prevents loading the external JQuery javascript. You'll also need to increase the time you pass to setInterval. 50 ms is not enough time for loading JQuery, manipulating the DOM and submitting the form. Something like 10 seconds sounds more practical to be on the safe side.

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