Question

我尝试将图片动态添加到已加载页面的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没有显示它（只有它附加的外部区域）。我没有使用外部URL src，而是尝试了一个没有运气的base64编码字符串。我也省略了路径并将文件存储在PhantomJS＆＃39;包括路径。这3个似乎都不起作用。

我也有一个window.timeout 2000，所以我不认为这是在加载PNG之前渲染页面的问题。

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

Answer 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尝试了完全相同的结果。

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

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

2 个答案: