通过 PhantomJS 向 DOM 添加/注入图像答案

【问题标题】：Add/inject image to DOM via PhantomJS通过 PhantomJS 向 DOM 添加/注入图像
【发布时间】：2014-12-13 22:05:26
【问题描述】：

我正在尝试将图像动态添加到已加载页面的 DOM 中，但在呈现页面时它没有显示。

在 page.evaluate 中像这样修改 DOM（摘录）：

page.open(url, function(status) {
    ...
    window.setTimeout(function () {     
        ...
        page.evaluate(function() {  
            ...
                var myimg = document.createElement("img");
                myimg.setAttribute('src', 'http://www.foobar.com/fooimage.png');                                
                myimg.setAttribute('height', '41px');
                myimg.setAttribute('width', '80px');
                outerdiv.appendChild(myimg); // outerdiv is visible in the rendered output
                document.body.appendChild(outerdiv);
            ...
        }   
        page.render

调试 page.content 显示添加成功，但是 page.render 没有显示（只有它附加到的 outerdiv）。我没有使用外部 URL src，而是尝试了一个 base64 编码的字符串，但没有成功。我还省略了路径并将文件存储在 PhantomJS 的包含路径中。这 3 个似乎都不起作用。

我的 window.timeout 也为 2000，所以我认为这不是在加载 PNG 之前呈现页面的问题。

添加 src 的正确方法是什么？外部 URL，本地文件？为什么甚至无法添加 base64 编码的图像？是否有任何安全限制阻止了我正在尝试做的事情？我正在运行 PhantomJS 1.9.0 顺便说一句。

【问题讨论】：

标签： javascript phantomjs

【解决方案1】：

我无法用这个完整的脚本重现你的问题。

var page = require('webpage').create();
var url = "http://phantomjs.org/img/phantomjs-logo.png";

page.open("http://example.com", function (status) {
    if (status !== 'success') {
        console.log('Unable to access network');
        phantom.exit();
    } else {
        page.render("without.png");
        page.evaluate(function(url){
            var myimg = document.createElement("img");
            myimg.setAttribute('src', url);
            document.body.appendChild(myimg);
        }, url);
        setTimeout(function(){
            page.render("with.png");
            phantom.exit();
        }, 5000);
    }
});

我用 PhantomJS 1.9.0 和 1.9.8 试了一下，结果完全一样。

【讨论】：

【解决方案2】：

我遇到了同样的问题。当我使用page.evaluate() 添加图像时，它们没有被加载，但内容正在改变。

如果我对 page.content 执行相同操作，图像将按预期加载并正常工作。

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

page.onLoadFinished = function() {
    console.log('');
    console.log('load finished');
    var render = page.render('evaluateTesting.png');
}

page.open('about:blank', function(status) {
    console.log('');
    console.log('open callback');

    //page reloading after this line
    page.content = '<!DOCTYPE html><head></head><body><img src="image path"></img></body>';


    /*
     * this is not causing page reload
     * but content is changing  
        page.evaluate(function() {
        console.log('');
        console.log('evaluating');
        var body = document.getElementsByTagName('body');
        body = body[0];
        body.innerHTML = '<img src="file:///home/ravitejay/projects/testappDup/sample.png"></img><br>';
    })*/
    console.log('content : '+page.content);
})

【讨论】：