如何在PhantomJS中用远程JavaScript替换DOM节点

Question

I'm new to PhantomJS and javascript, so forgive me if there is a simple solution.

I'm using PhantomJS to do screenshots of websites, and I want to replace certain DOM nodes with dynamic content from a remote javascript, something like this:

<script language="JavaScript" src="http://server/dynamic.js" type="text/javascript"></script>

My first try:

var page = require('webpage').create();

page.open('http://stackoverflow.com', function (status) {
    if (status !== 'success') {
        phantom.exit();
    }

    page.evaluate(function() {

        //// Case #1: what I really want
        // var s = '<script language="JavaScript" src="http://server/dynamic.js" type="text/javascript"></script>';

        //// Case #2: simple js test case
        // var s = '<script language="JavaScript" type="text/javascript">document.write("<p>THIS IS A TEST</p>");</script>';

        //// Case #3: very simple case
        var s = '<b>THIS IS A TEST</b>';

        var node = document.getElementById('mainbar');
        var pnode = node.parentNode;

        var newele = document.createElement('div');
        newele.innerHTML = s;

        pnode.replaceChild(newele, node);
    });

    page.render('test.jpg');

    phantom.exit();
});

For the simple case (case #3) where I'm just replacing it with some text, it works fine, but not for either of the javascript cases. It seems the javascript isn't being evaluated after being inserted via replaceChild(). I tried page.reload() just before page.render() but it didn't help.

Next, I tried creating the new element using iframe:

var newele = document.createElement('iframe');
newele.setAttribute('src', 'javascript:document.write("<p>THIS IS A TEST</p>");');

This works for the simple js test case #2, but I can't figure out how to make iframe work with what I really want (Case #1).

Any suggestions?

Answer 1

I came up with a workable solution:

var newele = document.createElement('iframe');
newele.setAttribute('src', 'javascript:document.write("<script src=\'http://server/dynamic.js\'></script>");');

I also had to put in a bit of delay:

window.setTimeout(function () {
    page.render('test.jpg');
    phantom.exit();
}, 500);

This works, but feels a little klugy to me. I would love to hear a better solution.

Answer 2

Nope, you can add your javascript reference to the page like this, right before calling evaluate the first time (excerpt):

...
        page.open(url, function (status) {
            if (status !== 'success') {
                console.log('Error: Cannot load url. Status: {0}.'.format(status));
                phantom.exit(1);
            } else {
                page.injectJs('../../../code/common/jquery.min.js');
                // call evaluate once to change the dropdown:
                page.evaluate(function (myobj) {
                        // manipulate DOM here with jquery, or whatever you want.
                }, myobj);
...

Please note that you can call evaluate several times, so you can extract stuff from the page, call javascript functions from the page, modify DOM, etc.