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

我正在编写一个Chrome网络应用程序，并试图在它上面加载时钟，但这不起作用。 HTML文件显示出来但不是JS，这意味着应用程序看起来像一个空框。我的JS文件不会加载到我的Chrome网络应用程序

我真的很感谢你的帮助 - 非常感谢你！

这里是我的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); 

})();

有没有什么办法让这个节目吗？

谢谢！

来源

2015-09-19 Jess

打开浏览器控制台，它会告诉你是否有问题 – Tasos

注意doctype缺少空格 – charlietfl

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

来源

2015-09-19 21:01:25 igorshmigor

对不起，我是一个白痴v基本了解jQuery。我将如何改变这一点？谢谢！ – Jess

将放在 – igorshmigor

Chrome扩展程序和应用服从Content Security Policy。

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

来源

2015-09-20 00:19:51

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

回答

相关问题