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

Question

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

我正在尝试使用以下PhantomJs脚本呈现一些链接到外部css文件的内联HTML:

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

Run Code Online (Sandbox Code Playgroud)

该layout.css文件可以正常访问wget

但是这里是phantomjs的输出:

$ ./phantomjs --debug=true render_demo.js
... snip ...
2014-01-06T12:17:53 [DEBUG] WebPage - updateLoadingProgress: 10
2014-01-06T12:17:53 [DEBUG] WebPage - updateLoadingProgress: 10
2014-01-06T12:17:53 [DEBUG] WebPage - updateLoadingProgress: 100
2014-01-06T12:17:53 [DEBUG] Network - Resource request error: 5 ( "Operation canceled" ) URL: "http://example.com/css/layout.css"
::rendering

Run Code Online (Sandbox Code Playgroud)

没有.png创建输出文件.

有关如何确保外部CSS资源在渲染之前完全加载的任何想法？当我请求相同的html时似乎工作正常page.open

Answer 1

Pie*_*nes 6

正如benweet所提到的,你需要设置page.content一次,因为它每次都会触发重载.

因此,您需要在实际设置页面内容之前定义回调.

试试这样:

var page = require('webpage').create();

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

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

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;

Run Code Online (Sandbox Code Playgroud)

归档时间：	11 年，9 月前
查看次数：	12926 次
最近记录：	6 年，9 月前