BrowserX

NPM Version NPM Downloads Node.js Version Build Status

browser-x 是一个基于 NodeJS 实现的轻量级“浏览器”,它的目标是高效的实现 DOM 中最核心的特性,以便开发者能够在 NodeJS 中使用 W3C 标准方法来操作文档与样式。

安装

npm install browser-x

接口

browser(options, callback)

返回:Promise

var browser = require('browser-x');

var url = __dirname + '/debug.html';
browser({
    url: url,
    loadCssFile: true,
    silent: false
}, function (errors, window) {
    if (errors) {
        throw errors;
    }
    var document = window.document;
    var element = document.querySelector('#banner h2');
    var fontFamily = window.getComputedStyle(element, '::after').fontFamily;
    console.log(fontFamily);
});

options

{
    /**
     * 文件基础路径
     */
    url: 'about:blank',

    /*
     * HTML 文本内容
     */
    html: null,

    /**
     * 是否支持加载外部 CSS 文件
     */
    loadCssFile: false,

    /**
     * 是否忽略内部解析错误-关闭它有利于开发调试
     * @type    {Boolean}
     */
    silent: true,

    /**
     * 请求超时限制
     * @type    {Number}    毫秒
     */
    resourceTimeout: 8000,

    /**
     * 最大的文件加载数量限制
     * @type    {Number}    数量
     */
    resourceMaxNumber: 64,

    /**
     * 是否缓存请求成功的资源
     * @return  {Object}
     */
    resourceCache: true,

    /**
     * 映射资源路径
     * @param   {String}    旧文件地址
     * @return  {String}    新文件地址
     */
    resourceMap: function(file) {
        return file;
    },

    /**
     * 忽略资源
     * @param   {String}    文件地址
     * @return  {Boolean}   如果返回`true`则忽略当当前文件的加载
     */
    resourceIgnore: function(file) {
        return false;
    },

    /**
     * 资源加载前的事件
     * @param   {String}    文件地址
     */
    resourceBeforeLoad: function(file) {
    },

    /**
     * 加载远程资源的自定义请求头
     * @param   {String}    文件地址
     * @return  {Object}
     */
    resourceRequestHeaders: function(file) {
        return {
            'accept-encoding': 'gzip,deflate'
        };
    }
}

运行单元测试

克隆源码,然后进入源码目录执行:

npm test

支持的 DOM API

注意事项

  1. 不支持 XML 文档解析
  2. 所有的 DOM 属性均为只读(计划在下一版本支持写入
  3. window.getComputedStyle() 仅能获取元素或伪元素在 CSS 中定义的原始值或继承属性,但没有进行计算输出(例如 em > px)
  4. document.styleSheets 在浏览器中无法跨域访问 CSSOM,browser-x 没有做此限制
  5. 不支持浏览器怪异模式

为什么使用 browser-x

browser-x 适合做这些事情:

  1. 高效的爬虫程序,使用 CSS 选择器来收集内容
  2. 分析元素的样式使用情况,例如和 CSS 相关的开发工具

例如:WebFont 压缩工具——font-spider

如果需要更多的 DOM 特性,例如跑基于 DOM 的测试脚本、甚至载入 jQuery 等,那么 jsdom 这个项目可能会更适合你(注意:它没有完整解析样式表)。