PhantomJs：带有外部CSS文件的内联HTML_Phantomjs

PhantomJs：带有外部CSS文件的内联HTML

phantomjs

PhantomJs：带有外部CSS文件的内联HTML,phantomjs,Phantomjs,我尝试使用以下PhantomJs脚本呈现一些内联HTML，这些HTML链接到外部css文件： var page = require('webpage').create(); page.content = ''; page.content += '<html><head>'; page.content += '<link rel="stylesheet" href="http://example.com/css/layout.css" type="text/css"

我尝试使用以下PhantomJs脚本呈现一些内联HTML，这些HTML链接到外部css文件：

var page = require('webpage').create();
page.content = '';
page.content += '<html><head>';
page.content += '<link rel="stylesheet" href="http://example.com/css/layout.css" type="text/css" media="Screen">';
page.content += '</head><body>';
page.content += '<h1>test</h1>';
page.content += '</body></html>';

page.onResourceRequested = function(requestData, request) {
    console.log('::loading', requestData['url']);  // this doesn't get logged
};

page.onLoadFinished = function() {
    console.log('::rendering');
    page.render('output.png');
    phantom.exit();
};

没有创建输出

.png

文件

关于如何确保外部CSS资源在渲染之前完全加载，有什么想法吗？

当我请求与

页面相同的html时，它似乎工作正常。打开
您有一个名为localtoremoteurlacessenabled
的设置，控制本地页面是否可以访问远程资源。它似乎默认为false
，因此您应该尝试更改它
PhantomJS设置是有文档记录的，因此更改此设置的操作与代码中的操作类似：
page.settings.localToRemoteUrlAccessEnabled = true;

就在页面创建之后。因为您的页面内容是通过脚本生成的，所以我不知道它是否真的被认为是本地的还是远程的。如果此设置不起作用，您可以尝试将webSecurityEnabled
设置为false
您必须将页面内容设置一次。多次调用setter将多次加载页面，并取消以前未完成的异步资源加载
var page = require('webpage').create();
var content = '';
content += '<html><head>';
content += '<link rel="stylesheet" href="http://example.com/css/layout.css" type="text/css" media="Screen">';
content += '</head><body>';
content += '<h1>test</h1>';
content += '</body></html>';
page.content = content;

var page=require（'webpage'）.create（）；
var内容=“”；
内容+=''；
内容+=''；
内容+=''；
内容+=‘测试’；
内容+=''；
page.content=内容；
如前所述，您只需设置一次页面内容，因为每次都会触发重新加载
因此，在实际设置页面内容之前，您还需要定义回调
请像这样尝试：
var page=require（'webpage'）.create（）；
page.onResourceRequested=函数（requestData，request）{
console.log（'：：load'，requestData['url']）；//现在会记录这些内容
};
page.onLoadFinished=函数（）{
log（“：：rendering”）；
page.render（'output.png'）；
phantom.exit（）；
};
var内容=“”；
内容+=''；
内容+=''；
内容+=''；
内容+=‘测试’；
内容+=''；
page.content=内容；
Hmmm，似乎不起作用。从您链接到它的文档中可以看到，“注意：设置仅在最初调用page.open函数时适用。”，而我没有webSecurityEnabled的page.open调用。同上！最后一点：在更改内容之前，尝试打开
类似于关于：空白，这可能会强制设置？谢谢，我已经尝试过调整，但没有任何区别：我仍然在调试输出中收到“操作取消”消息。就是这样，谢谢！我错误地认为函数赋值总是首先在一个范围内执行（与函数定义的方式相同）。
var page = require('webpage').create();
var content = '';
content += '<html><head>';
content += '<link rel="stylesheet" href="http://example.com/css/layout.css" type="text/css" media="Screen">';
content += '</head><body>';
content += '<h1>test</h1>';
content += '</body></html>';
page.content = content;