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

【问题标题】：How to wait for page evaluation in PhantomJS after assigning custom HTML to page.content将自定义 HTML 分配给 page.content 后如何在 PhantomJS 中等待页面评估
【发布时间】：2015-10-21 23:13:10
【问题描述】：

我正在尝试将图像的宽度作为属性添加到自身。我需要在浏览器中加载后出现的宽度。我这样做是为了 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() 中，但这似乎无法通过评估运行。这是一个在浏览器中使用相同代码的示例： http://jsbin.com/suhovabiza/edit?html,js,output

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

【问题讨论】：

标签： javascript phantomjs

【解决方案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>';

【讨论】：