从jsdom迁移到phantomJS? (基本DOM创建) [英] Migrate from jsdom to phantomJS ? (basic DOM creation)
问题描述
M. Bostock指出，nodejs的jsdom对svg的支持不完整，对我来说至关重要的是，它不支持getBBox().另外，他建议切换到nodejs的PhantomJS.我已经签出，但是这种方法对我来说是新的.
M. Bostock pointed out that nodejs' jsdom have incomplete support for svg, and, critical for me, doesn't support getBBox(). Also, he advised to switch to nodejs' PhantomJS. I checked out but the approach is new to me.
我的nodejs + jsdom脚本创建一个虚拟DOM，我的d3js可以通过该虚拟DOM播放，如下所示:
My nodejs + jsdom script create a virtual DOM, with which my d3js plays and is as follow :
var jsdom = require('jsdom');
jsdom.env( // creates virtual page
"<html><body></body></html>", // create my DOM hook,
[ 'http://d3js.org/d3.v3.min.js', // add my online dependencies ...
'../js/d3.v3.min.js', // ... & local ones
'../js/jquery-2.1.3.min.js'],
function (err, window) {
//my normal JS or nodejs code here !
}
);
如何将此nodejs + jsdom迁移到nodejs + PhantomJS中?
推荐答案
Since you want to do this from node.js, you should use a PhantomJS bridge like phantomjs-node (phantom npm module).
当您不在PhantomJS中打开页面时，实际上是在about:blank页面中工作，您需要为基础页面添加'--local-to-remote-url-access = yes'命令行选项PhantomJS进程，以便可以加载远程资源.也许--web-security=false，--ssl-protocol=any和ignore-ssl-errors=true是必需的.
When you don't open a page in PhantomJS, you're actually working in an about:blank page, you need to add '--local-to-remote-url-access=yes' commandline option for the underlying PhantomJS process, so that remote resources can be loaded. Maybe --web-security=false, --ssl-protocol=any and ignore-ssl-errors=true may be necessary.
要将其他脚本注入DOM，您需要使用 injectJs() 用于本地文件， includeJs() 用于远程文件.此外，您不能直接在PhantomJS中访问DOM，因为它具有两个上下文.沙盒页面上下文( page.evaluate() )无法访问在外部定义的变量，因此，如果需要，您将需要显式传递它们.
To inject additional scripts into the DOM, you need to use injectJs() for local files and includeJs() for remote files. Furthermore, you cannot directly access the DOM in PhantomJS, because it has two contexts. The sandboxed page context (page.evaluate()) has no access to variables defined outside, so you will need to pass them explicitly in, if you need them.
var phantom = require('phantom');
var async = require('async');
function run(page, ph) {
page.evaluate(function () {
// page context: DOM code here
return document.title;
}, function (title) {
// node code here
console.log('Page title is ' + title);
ph.exit();
});
}
var remoteScripts = [ "http://d3js.org/d3.v3.min.js" ];
var localScripts = [ "../js/d3.v3.min.js", "../js/jquery-2.1.3.min.js" ];
phantom.create('--local-to-remote-url-access=yes', '--web-security=false', function (ph) {
ph.createPage(function (page) {
async.series(remoteScripts.map(function(url){
return function(next){
page.includeJs(url, function(){
next();
});
};
}), function(){
async.series(localScripts.map(function(url){
return function(next){
page.injectJs(url, function(){
next();
});
};
}), function(){
run(page, ph);
});
});
});
});
您可以使用 async 将脚本列表加载到DOM中.我使用了series()函数.
You can use async to load script lists into the DOM. I used the series() function.
这篇关于从jsdom迁移到phantomJS? (基本DOM创建)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
