JSDOM 未在 Node 中加载脚本文件

Question

我正在尝试在 jsdom 中加载一个 html 页面，最终会生成图表。我无法克服仅加载 html 页面并执行 javascript 的第一个障碍。

下面是我正在尝试加载的 html 页面，它不接受任何参数，只呈现一个简单的图形。

<html>
<head>
    <script src="http://code.jquery.com/jquery.min.js"/>
    <script src="http://static.fusioncharts.com/code/latest/fusioncharts.js"/>
    <script src="http://static.fusioncharts.com/code/latest/fusioncharts.charts.js"/>
    <script src="http://static.fusioncharts.com/code/latest/themes/fusioncharts.theme.fint.js"/>
    <script>
        var testVar = true;
        function test(){
            testVar = false;
        };
    </script>
    <script>
        $(document).ready(function(){
            FusionCharts.ready(function () {
            var revenueChart = new FusionCharts({
                type: 'column2d',
                renderAt: 'container',
                width: '400',
                height: '200',
                dataFormat: 'json',
                dataSource: {
                    "chart": {
                        "caption": "Split of Revenue by Product Categories",
                        "subCaption": "2014",
                        "numberPrefix": "$",
                        "theme": "fint",
                        "captionFontSize": "13",
                        "subcaptionFontSize": "12",
                        "subcaptionFontBold": "0",
                        "showValues": "0"
                    },
                    "data": [{
                        "label": "Food",
                            "value": "28504"
                    }, {
                        "label": "Apparels",
                            "value": "14633"
                    }, {
                        "label": "Electronics",
                            "value": "10507"
                    }, {
                        "label": "Household",
                            "value": "4910"
                    }]
                }
            }).render();
            });

            var svg = $('#container').html();
        });
    </script>
<head>
<body>
    <div id="container">Charts will render here</div>
</body>

这是我尝试加载此页面的节点中的代码..

    var config = {
    file: path.join(__dirname, "chart.html"),
    features:{
      FetchExternalResources: ["script"],
      ProcessExternalResources: ["script"],
      MutationEvents: '2.0'
    },
    scripts:[
      "http://code.jquery.com/jquery.min.js",
      "http://static.fusioncharts.com/code/latest/fusioncharts.js",
      'http://static.fusioncharts.com/code/latest/fusioncharts.charts.js',
      "http://static.fusioncharts.com/code/latest/themes/fusioncharts.theme.fint.js"
    ],        
    onload: function(err, window) {
      console.log('*******onload')
    },
    created: function(err, window) {
      console.log('*******created')
    },        
    done: function(err, window) {
      console.log('*******done')
      if(err){
        console.log('*****got err ' + err.message);
        callback(err);
      }

      global.window = window;
      console.log('inside done ----------')
      var $ = window.jQuery || window.$,
      FusionCharts = window.FusionCharts,
      document = window.document;

      if(typeof FusionCharts == 'undefined')
        console.log('FusionCharts NOT LOADED')
      else
        console.log('FusionCharts LOADED')

      if(typeof $ == 'undefined')
        console.log('JQUERY NOT LOADED')
      else
        console.log('JQUERY LOADED')

      console.log('testVar ' + window.testVar)
      console.log(window.test())
      console.log('testVar ' + window.testVar)
      console.log('svg is ' + window.svg);
      console.log($('#container').html());

      window.close();        

    }
  }
  jsdom.env(config);

奇怪的是，如果我不在配置对象中包含 scripts，它将不会加载它们并使它们在 done 回调中可用，即使它在html 页。

此外，testVar 从未在回调中定义，即使它存在于页面中，与 window.test() 相同，即使它在 html 页面中它只是回调中似乎不可用。

我已经尝试了创建 jsdom 对象的所有不同变体，但是其中 none 允许页面加载脚本而不是我将它传递到配置对象中，并且 none不同的版本允许我访问脚本标签中定义的变量和函数。

有什么我遗漏的吗？

Answer 1

更改您的 script 元素，使其正确 HTML:

<script src="http://code.jquery.com/jquery.min.js"></script>

如果您这样做，一切都会正常加载，您将不必在配置中使用 scripts。

JSDOM 未在 Node 中加载脚本文件

JSDOM not loading script files in Node

javascript

jquery

node.js

jsdom