PhantomJS如何在html字符串中呈现javascript

Question

我试图让 PhantomJS 获取一个 html 字符串，然后让它像浏览器一样呈现整个页面（包括在页面源代码中执行任何 javascript）。我需要将生成的 html 结果作为字符串。我已经看到了 page.open 的示例，因为我的数据库中已经有了页面源，所以没有用。

是否需要使用 page.open 来触发 PhantomJS 中的 javascript 渲染引擎？有没有办法在内存中完成这一切（即......没有 page.open 发出请求或从/向磁盘读取/写入 html 源代码？

我看到了一个类似的问题和答案here，但这并不能完全解决我的问题。运行下面的代码后，我似乎没有在 html 源字符串中呈现 javascript。

var page = require('webpage').create();
page.setContent('raw html and javascript in this string', 'http://whatever.com');
//everything i've tried from here on doesn't execute the javascript in the string

-------------更新---------------

根据下面的建议尝试了以下方法，但这仍然不起作用。只返回我提供的未呈现 javascript 的原始源代码。

var page = require('webpage').create();
page.settings.localToRemoteUrlAccessEnabled = true;
page.settings.webSecurityEnabled = false;
page.onLoadFinished = function(){
    var resultingHtml = page.evaluate(function() {
        return document.documentElement.innerHTML;
    });
    console.log(resultingHtml);
    //console.log(page.content); // this didn't work either
    phantom.exit();
};
page.url = input.Url;
page.content = input.RawHtml;
//page.setContent(input.RawHtml, input.Url); //this didn't work either

Answer 1

以下作品

page.onLoadFinished = function(){
    console.log(page.content); // rendered content
};
page.content = "your source html string";

但您必须记住，如果您从字符串设置页面，则域将为 about:blank。因此，如果 html 从其他域加载资源，那么您应该使用 --web-security=false --local-to-remote-url-access=true 命令行选项运行 PhantomJS：

phantomjs --web-security=false --local-to-remote-url-access=true script.js

此外，您可能需要等待 JavaScript 执行完成，当 PhantomJS 认为它完成时，这可能还没有完成。使用setTimeout() 等待静态时间量或使用waitFor() 等待页面上的特定条件。这个问题给出了更强大的等待整页的方法：phantomjs not waiting for “full” page load

Answer 2

setTimeout 使它工作，即使我不高兴为每个页面等待一定的时间。 here 讨论的 waitFor 方法不起作用，因为我不知道每个页面可能包含哪些元素。

var system = require('system');
var page = require('webpage').create();
page.setContent(input.RawHtml, input.Url);
window.setTimeout(function () {
    console.log(page.content);
    phantom.exit();
}, input.WaitToRenderTimeInMilliseconds);

Answer 3

也许不是你想要的答案，但使用 PhantomJsCloud.com 你可以轻松做到，这里有一个例子：http://api.phantomjscloud.com/api/browser/v2/a-demo-key-with-low-quota-per-ip-address/?request={url:%22http://example.com%22,content:%22%3Ch1%3ENew%20Content!%3C/h1%3E%22,renderType:%22png%22,scripts:{domReady:[%22var%20hiDiv=document.createElement%28%27div%27%29;hiDiv.innerHTML=%27Hello%20World!%27;document.body.appendChild%28hiDiv%29;window._pjscMeta.scriptOutput={Goodbye:%27World%27};%22]},outputAsJson:false}“新内容！”是替换原始内容的内容，而“Hello World！”由脚本放置在页面中。

如果您想通过普通的 PhantomJs 执行此操作，则需要在页面内容加载后使用 injectJs 或 includeJs 函数。