我的JS文件不会加载到我的Chrome Web应用程序中

Question

I'm writing a Chrome web application and am trying to load a clock onto it, but this is not working. 我正在编写一个Chrome Web应用程序，并试图在其上加载时钟，但这不起作用。 The HTML & CSS files are showing up but not the JS, meaning that the application just looks like an empty box. 显示的是HTML和CSS文件，但没有显示JS，这意味着该应用程序看起来像一个空盒子。

I would really appreciate your help - thank you very much! 非常感谢您的帮助-非常感谢！

Here is my popup.html file: 这是我的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>

And here is my clock.js file: 这是我的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);

})();

Is there any way to make this show up? 有什么办法可以做到这一点？

Thank you! 谢谢！

Answer 1

Your clock.js uses jQuery but is loaded before jQuery is loaded. 您的clock.js使用jQuery，但在加载jQuery之前已加载。 Include it after jQuery instead. 而是在jQuery之后添加它。

Answer 2

Chrome extensions and apps obey a Content Security Policy . Chrome扩展程序和应用遵守《内容安全政策》。

This disallows external scripts, so you should download the external files and put them in the same folder as your other scripts. 这不允许使用外部脚本，因此您应该下载外部文件，并将其与其他脚本放在同一文件夹中。

我的JS文件不会加载到我的Chrome Web应用程序中

问题描述

2 个解决方案

解决方案1
3 2015-09-19 21:01:25

解决方案2
0 2015-09-20 00:19:51

我的JS文件不会加载到我的Chrome Web应用程序中

问题描述

2 个解决方案

解决方案1 3 2015-09-19 21:01:25

解决方案2 0 2015-09-20 00:19:51

解决方案1
3 2015-09-19 21:01:25

解决方案2
0 2015-09-20 00:19:51