Javascript 模块未出现在通过 CS50 托管的网站中 IDE

Question

我正在为这门课程做我的期末项目，并且努力弄清楚我在使用 cal-heatmap 时遇到的错误，cal-heatmap 是一个 Javascript 库，可以创建热图，例如 Github的贡献日历。

当我在我的计算机上创建一个 HTML 文件并在 Chrome 中打开它时，一切看起来都很完美。

Perfect

当我在 CS50 IDE 中创建相同的 HTML 文件并在通过 CS50 IDE 和 Flask/Apache 托管服务器后打开它时，事情看起来并不完美.

Not perfect

    <!DOCTYPE html>  
<html lang="en">  

<head>  
    <title>Cal-Heatmap Samples</title>  
    <meta charset="utf-8">  
    <meta name="viewport" content="width=device-width, initial-scale=1">  
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">  
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>  
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>  
    <script type="text/javascript" src="http://d3js.org/d3.v3.min.js"></script>  
    <script type="text/javascript" src="http://cdn.jsdelivr.net/cal-heatmap/3.3.10/cal-heatmap.min.js"></script>  
    <link rel="stylesheet" href="http://cdn.jsdelivr.net/cal-heatmap/3.3.10/cal-heatmap.css" />  
</head>  

<body>  
    <div class="container">  
        <div class="page-header">  
            <h2>  
Cal-HeatMap Samples</h2>  
        </div>  
        <div class="row">  
            <div class="col-lg-6">  
                <div class="panel panel-default">  
                    <div class="panel-heading"><span class="glyphicon glyphicon-equalizer"></span> Service Call Statistics</div>  
                    <div class="panel-body">  
                        <div id="heatmap-navigation">  
                            <button id="heatmap-previous" style="margin-bottom: 5px;" class="btn-xs"><i class="glyphicon glyphicon-chevron-left"></i></button>  
                            <button id="heatmap-next" style="margin-bottom: 5px;" class="btn-xs"><i class="glyphicon glyphicon-chevron-right"></i></button>  
                        </div>  
                        <div id="cal-heatmap">  
                        </div>  
                    </div>  
                </div>  
            </div>  
        </div>  


        <script type="text/javascript">  
            var cal = new CalHeatMap();  
            cal.init({  
                domain: "month",  
                subDomain: "day",  
                cellSize: 20,  
                itemName: ["service ticket", "service tickets"],  
                data: {  
                    "1452019700": 40,  
                    "1454688100": 50,  
                    "1452710900": 5,  
                    "1452883700": 15,  
                    "1453142900": 15,  
                    "1453488500": 30,  
                    "1456239700": 80,  
                    "1453662300": 20,  
                    "1455130100": 60,  
                    "1455562100": 70,  
                    "1455131100": 10,  
                    "1456166900": 30,  
                    "1456399000": 12,  
                    "1451674100": 90  
                },  
                subDomainTextFormat: "%d",  
                range: 3,  
                displayLegend: true,  
                domainMargin: 20,  
                animationDuration: 800,  
                domainDynamicDimension: false,  
                start: new Date(2016, 01, 01),  
                end: new Date(2016, 02, 26),  
                scale: [10, 20, 80],  
                previousSelector: "#heatmap-previous",  
                nextSelector: "#heatmap-next",  
            });  
        </script>  
</body>  

</html>

什么给了？为什么我使用相同的代码得到不同的结果？

感谢您的帮助！

Answer 1

Phix，我可以亲你！！

作为业余爱好者，我显然没有窥探Chrome控制台的习惯。当我按照你的要求去做时，问题很明显 crystal:

Cloud9（CS50 的基于云的 IDE）不允许您 link 仅遵循 HTTP 而不是 HTTPS 的资源。

Before

After

我通过将之前提供的代码中的所有香草 "http://" 替换为 "https://" 来解决问题。

谢谢，谢谢！

Javascript 模块未出现在通过 CS50 托管的网站中 IDE

Javascript module not appearing in website hosted through CS50 IDE

javascript

cs50