nodejs之jsdom插件，运行浏览器环境

https://www.npmjs.com/package/jsdom

一、安装依赖

npm install jsdom
1

二、用法

var jsdom = require('jsdom')
var { JSDOM } = jsdom;
var dom =  new JSDOM(``);
window = dom.window
document=window.document
navigator=window.navigator  
//使用jq     
const $ = require( "jquery" )( window ); 
1
2
3
4
5
6
7
8

三、方法

1. new JSDOM(domStr,option) 实例化一个dom环境

   new JSDOM('',{
       url: 'https://example.org/',  // window.location，document.URL
       referrer: 'https://example.org/', // document.referrer
       contentType: 'text/html',//内容类型
       storageQuota: 10000000, //缓存大小
       userAgent: 'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/90.0.4430.212 Safari/537.36',//userAgent请求头
       includeNodeLocations: true,//允许查找dom位置，
       runScripts: 'dangerously',//启用在页面内执行js，outside-only在外部执行js：window.eval()
       cookieJar: new jsdom.CookieJar(),//cokkie
       pretendToBeVisual:true,//因为JSDOM是无头的,该配置可假装是有头的，window.requestAnimationFrame() 、window.cancelAnimationFrame()
       resources:new jsdom.ResourceLoader(option),//jsdom不会加载任何子资源（脚本、样式表、图像或iframe），该配置加载子资源
       virtualConsole:new jsdom.VirtualConsole(),//虚拟控制台
       beforeParse(window) {}
   }) 
   1
   2
   3
   4
   5
   6
   7
   8
   9
   10
   11
   12
   13
   14

2. JSDOM.fromURL() 通过url 实例化dom环境

   JSDOM.fromURL('https://www.baidu.com/', { 
       //同new JSDOM 中的option 
   }).then(dom => {
     console.log(dom.serialize());
   });
   1
   2
   3
   4
   5

3. JSDOM.fragment()通过字符串创建dom

   const document = JSDOM.fragment('
   Hellospan
   Hi!
   ');
   
   console.log(document.querySelector('p').innerHTML)
   1
   2
   3

4. JSDOM.fromFile() 通过文件实例化dom环境

   JSDOM.fromFile('stuff.html', {
       //同new JSDOM 中的option
   }).then(dom => {
     console.log(dom.serialize());
   });
   1
   2
   3
   4
   5

5. 页面内执行js：runScripts

   var dom = new JSDOM('', { runScripts: "dangerously"})
   1

6. new jsdom.ResourceLoader(option) 加载子资源

   const resources = new jsdom.ResourceLoader({
       proxy: 'http://127.0.0.1:9001', //HTTP代理的地址。
       strictSSL: false, //禁用SSL证书
       userAgent: 'Mellblomenator/9000',//userAgent请求头
   })
   const dom = new JSDOM('', { resources });
   1
   2
   3
   4
   5
   6

7. new jsdom.VirtualConsole() 虚拟控制台

   const virtualConsole = new jsdom.VirtualConsole()
   const dom = new JSDOM(``, { virtualConsole });
   
   //监听事件
   virtualConsole.on("error", () => { ... });
   virtualConsole.on("warn", () => { ... });
   virtualConsole.on("info", () => { ... });
   virtualConsole.on("dir", () => { ... });
   //重定向控制台到node
   virtualConsole.sendTo(console,{ 
       omitJSDOMErrors: true //jsdom报错信息
   })
   1
   2
   3
   4
   5
   6
   7
   8
   9
   10
   11
   12

8. new jsdom.CookieJar() cookie

   const cookieJar = new jsdom.VirtualConsole(store, options)
   const dom = new JSDOM(``, { cookieJar });
   1
   2

9. dom.serialize() 获取序列化dom
10. dom.nodeLocation(bodyEl) 查找位置

    const dom = new JSDOM('
    ', {
      includeNodeLocations: true
    })
    
    dom.window.onload = () => {
        console.log(dom.nodeLocation(dom.window.document.body))
    }
    1
    2
    3
    4
    5
    6
    7

11. dom.window window对象
12. document document对象
13. window.navigator navigator对象