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对象的所有不同变体，但是没有一个允许页面加载脚本而不是我将它传递给配置对象，并且没有一个不同的版本允许我访问定义的变量和函数在脚本标签中。

我有什么遗失的吗？

Answer 1

更改您的script元素，使其格式正确HTML：

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

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

JSDOM没有在Node中加载脚本文件

1 个答案: