Question

我在网上找到的大部分examples都涉及加载网址。

但是，如果我只是一个包含svg或html的字符串，并且我想将它加载到dom中进行操作，我就无法弄清楚如何操作它。

var fs=require('fs')
var content = fs.read("EarlierSavedPage.svg")
// How do I load content into a DOM?

我意识到，在这个示例中，正在读取本地文件，有一个workaround用于直接读取本地文件，但我更感兴趣的是是否可以从字符串加载页面

我已经看过the documentation，但没有看到任何明显的事情。

Answer 1

PhantomJS中的默认page与about:blank相当，基本上是

<html>
    <body>
    </body>
</html>

这意味着您可以直接将svg添加到DOM并进行渲染。看来你必须异步渲染它才能让浏览器有时间实际计算svg。这是一个完整的脚本：

var page = require('webpage').create(),
    fs = require('fs')

var content = fs.read("EarlierSavedPage.svg")

page.evaluate(function(content){
    document.body.innerHTML = content;
}, content);

setTimeout(function(){
    page.render("EarlierSavedPage.png"); // render or do whatever
    phantom.exit();
}, 0); // phantomjs is single threaded so you need to do this asynchronously, but immediately

将HTML文件加载到内容中时，您可以直接将其分配给当前的DOM（page.content）：

page.content = content;

这可能还需要一些异步解耦，如上所述。

另一种方法是使用page.open实际加载HTML文件：

page.open(filePathToHtmlFile, function(success){
    // do something like render
    phantom.exit();
});

如何从PhantomJS中的字符串加载DOM？

1 个答案: