Question

我正在尝试将图像的宽度添加为自身作为属性。我需要在浏览器中加载时显示的宽度。我这样做是为了html电子邮件和与outlook的兼容性。

这是我的代码没有按预期工作：

var page = require('webpage').create();
page.viewportSize = { width: 1366, height : 768 };
page.content = '<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Title of Test Website</title></head><body><table><tr style="width: 400px;"><td width="400"><img src="http://placehold.it/1000x400" alt="" class="img"><img src="http://placehold.it/1000x400" alt="" class="img"></td></tr></table></body></html>';

var imagePage = page.evaluate(function() {
        var imgs= document.getElementsByClassName('img');
        for (var i = 0; i < imgs.length; i++) {
            imgs[i].width = imgs[i].width;
        }
    return document.documentElement.outerHTML;
});

console.log(imagePage);
phantom.exit();

这将返回页面，其中包含已添加图像的width属性但宽度设置为0.经过一些测试后，这似乎发生了，因为页面尚未完全加载。我尝试在window.load（）中包装代码，但似乎没有使用evaluate运行。这是一个在浏览器中使用相同代码的示例： http://jsbin.com/suhovabiza/edit?html,js,output

在页面加载后评估加载的任何想法？看看PhantomJS文档，这可以通过page.open来完成，它具有onLoadFinished回调但需要一个url，我在这种情况下使用字符串。

Answer 1

您通常使用page.open()回调等待页面加载，但由于您实际上是在加载自定义about：blank页面（通过将字符串分配给page.content），因此您可以收听onLoadFinished event喜欢这样：

var page = require('webpage').create();
page.viewportSize = { width: 1366, height : 768 };

page.onLoadFinished = function(){
    page.evaluate(function() {
        var imgs= document.getElementsByClassName('img');
        for (var i = 0; i < imgs.length; i++) {
            imgs[i].width = imgs[i].width;
        }
    });

    console.log(page.content);
    phantom.exit();
};

page.content = '<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Title of Test Website</title></head><body><table><tr style="width: 400px;"><td width="400"><img src="http://placehold.it/1000x400" alt="" class="img"><img src="http://placehold.it/1000x400" alt="" class="img"></td></tr></table></body></html>';

在将自定义HTML分配给page.content后，如何在PhantomJS中等待页面评估

1 个答案: