PhantomJs:带有外部CSS文件的内联HTML[英] PhantomJs: inline HTML with external CSS file

问题描述

我正在尝试使用以下 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();
};

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

没有创建输出 .png 文件.

关于如何确保外部 CSS 资源在渲染之前完全加载有什么想法吗?当我使用 page.open

请求相同的 html 时,它似乎可以正常工作

推荐答案

正如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;

本文地址:https://www.itbaoku.cn/post/1740064.html