我的 JS 文件不会加载到我的 Chrome 网络应用程序上答案

【问题标题】：My JS file won't load on my Chrome web application我的 JS 文件不会加载到我的 Chrome 网络应用程序上
【发布时间】：2015-12-16 20:25:44
【问题描述】：

我正在编写一个 Chrome 网络应用程序并尝试在其上加载一个时钟，但这不起作用。显示的是 HTML 和 CSS 文件，但没有显示 JS，这意味着应用程序看起来像一个空框。

非常感谢您的帮助 - 非常感谢！

这是我的 popup.html 文件：

<!DOCTYPEhtml>
    <link rel="stylesheet" type="text/css" href="popup.css">
        <title>Your Personal Homepage</title>
        <script src="popup.js"></script>
        <script src="clock.js"></script>
      </head>
       <body>
    <div id="clock" class="light">
                <div class="display">
                    <div class="weekdays"></div>
                    <div class="ampm"></div>
                    <div class="alarm"></div>
                    <div class="digits"></div>
                </div>
            </div>
    <!-- JavaScript Includes -->
            <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
            <script src="http://cdnjs.cloudflare.com/ajax/libs/moment.js/2.0.0/moment.min.js"></script>
            </body> 
</html>

这是我的clock.js文件：

$(function(){

// Cache some selectors

var clock = $('#clock'),
    alarm = clock.find('.alarm'),
    ampm = clock.find('.ampm');

// Map digits to their names (this will be an array)
var digit_to_name = 'zero one two three four five six seven eight nine'.split(' ');

// This object will hold the digit elements
var digits = {};

// Positions for the hours, minutes, and seconds
var positions = [
    'h1', 'h2', ':', 'm1', 'm2', ':', 's1', 's2'
];

// Generate the digits with the needed markup,
// and add them to the clock

var digit_holder = clock.find('.digits');

$.each(positions, function(){

    if(this == ':'){
        digit_holder.append('<div class="dots">');
    }
    else{

        var pos = $('<div>');

        for(var i=1; i<8; i++){
            pos.append('<span class="d' + i + '">');
        }

        // Set the digits as key:value pairs in the digits object
        digits[this] = pos;

        // Add the digit elements to the page
        digit_holder.append(pos);
    }

});

// Add the weekday names

var weekday_names = 'MON TUE WED THU FRI SAT SUN'.split(' '),
    weekday_holder = clock.find('.weekdays');

$.each(weekday_names, function(){
    weekday_holder.append('<span>' + this + '</span>');
});

var weekdays = clock.find('.weekdays span');

// Run a timer every second and update the clock

(function update_time(){

    // Use moment.js to output the current time as a string
    // hh is for the hours in 12-hour format,
    // mm - minutes, ss-seconds (all with leading zeroes),
    // d is for day of week and A is for AM/PM

    var now = moment().format("hhmmssdA");

    digits.h1.attr('class', digit_to_name[now[0]]);
    digits.h2.attr('class', digit_to_name[now[1]]);
    digits.m1.attr('class', digit_to_name[now[2]]);
    digits.m2.attr('class', digit_to_name[now[3]]);
    digits.s1.attr('class', digit_to_name[now[4]]);
    digits.s2.attr('class', digit_to_name[now[5]]);

    // The library returns Sunday as the first day of the week.
    // Stupid, I know. Lets shift all the days one position down, 
    // and make Sunday last

    var dow = now[6];
    dow--;

    // Sunday!
    if(dow < 0){
        // Make it last
        dow = 6;
    }

    // Mark the active day of the week
    weekdays.removeClass('active').eq(dow).addClass('active');

    // Set the am/pm text:
    ampm.text(now[7]+now[8]);

    // Schedule this function to be run again in 1 sec
    setTimeout(update_time, 1000);

})();

有什么办法可以让它出现吗？

谢谢！

【问题讨论】：

打开浏览器控制台，如果有问题会告诉你
注意文档类型缺少空格

标签： javascript html css google-chrome google-chrome-extension

【解决方案1】：

您的clock.js 使用jQuery，但在加载jQuery 之前加载。改为在 jQuery 之后包含它。

【讨论】：

对不起，我是一个对jQuery有基本了解的白痴。我将如何改变这个？谢谢！
把你的放在之后

【解决方案2】：

Chrome 扩展程序和应用遵循Content Security Policy。

这不允许外部脚本，因此您应该下载外部文件并将它们放在与其他脚本相同的文件夹中。

【讨论】：