个人中心
gpt4 book ai didi

javascript - JSDOM 未在 Node 中加载脚本文件

转载 作者：行者123 更新时间：2023-12-02 14:12:42 24 4
gpt4 key购买 nike

我正在尝试在 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>

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

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

我有什么遗漏吗？

最佳答案

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

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

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

关于javascript - JSDOM 未在 Node 中加载脚本文件，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/39379739/

24 4 0
文章推荐： javascript - 如何用javascript通过点击来改变背景颜色？
文章推荐： javascript - 用于 API 调用的工作搜索框
文章推荐： javascript - 通过ajax发送多维数组，index[0]问题
文章推荐： javascript - 如何在 React 中更新特定的 redux 状态片段
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com