我正在尝试将图像的宽度作为属性添加到自身。我需要将其加载到浏览器中后出现的宽度。我这样做是为了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();
这将返回添加了图像宽度属性的页面，但宽度设置为0。经过一些测试，这似乎是由于页面尚未完全加载而发生的。我尝试将代码包装在window.load（）中，但似乎不与评估一起运行。这是一个在浏览器中使用相同代码的示例：http : //jsbin.com/suhovabiza/edit?html,js,output
关于加载的任何想法在页面加载后会评估吗？查看PhantomJS文档，可以使用page.open来完成，它具有onLoadFinished回调，但是需要一个URL，在这种情况下，我正在使用字符串。
通常，您会使用page.open()回调page.content函数等待页面加载，但是由于您实际上是在加载自定义about：blank页面（通过将字符串分配给），因此您可以像这样监听onLoadFinished事件：
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>';
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句