Chrome應用程序阻止JS加載

我試圖創建一個Chrome應用程序，其中有兩個HTML頁面。 index.html和settings.htmlChrome應用程序阻止JS加載

我已經創建了三個JavaScript文件：

main.js
settings.js
utils.js。

utils.js是一套方法來註冊事件和其他類型的輔助活動。

當我執行我的應用程序settings.js出現，即使是html頁面一直沒開被執行。

預期功能是settings.html調用頭settings.js。在$(document).ready()裏面我註冊了兩個事件監聽器。發生什麼事情是，當整個應用程序打開時，settings.js被執行，因此它將一個事件監聽器註冊到一個尚不存在的dom元素。

我如何防止settings.js從整個應用程序的入口執行？

完整代碼少下面

utils.js的HTML位：

var eventTypes = { 
    'click': 0, 
    'on': 1 
}; 

var save = function(key, value) { 
    chrome.storage.local.set({key: value}, function() { 
    // Notify that we saved. 
    console.log('Settings saved'); 
    }); 
}; 

var load = function(key) { 
    chrome.storage.local.get(key, function(myobject) { 
    console.log(myobject); 

    settings.key = myobject; 
    }); 
}; 

var registerEventListener = function(event, className, callback) { 
    switch(event) { 
    case eventTypes.click: 
     registerOnClick(className, callback); 
    break; 
    case eventTypes.on: 
     registerOn(className, callback); 
    break; 
    } 
}; 

var registerOnClick = function(className, callback) { 
    $(className).click(function() { 
    callback(); 
    }); 
    console.log(className + ' registered!'); 
}; 

var registerOn = function(className, callback) { 
    $(className).on('click', function() { 
    callback(); 
    }); 
}; 

var openSettings = function() { 
    console.log('Opening settings!'); 

    chrome.app.window.create(
    'settings.html', 
    { 
     id: 'settingsWindow', 
     bounds: {width: 800, height: 600} 
    } 
); 

    console.log('Done opening settings'); 
}; 

var saveSettings = function() { 
    console.log('Saving settings!'); 
}; 

var cancelSettings = function() { 
    console.log('Canceling settings!'); 
}; 

// Smooth scrolling 
$(function() { 
    $('a[href*="#"]:not([href="#"])').click(function() { 
    if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) { 
     var target = $(this.hash); 
     target = target.length ? target : $('[name=' + this.hash.slice(1) +']'); 
     if (target.length) { 
     $('html, body').animate({ 
      scrollTop: target.offset().top 
     }, 1000); 
     return false; 
     } 
    } 
    }); 
});

main.js：

$(document).ready(function() { 
    // Register event listeners 
    registerEventListener(eventTypes.click, '.settingsIcon', openSettings); 
    console.log(settings); 
});

settings.js：

var cancelSettings = function() { 
    console.log('Cancel settings!'); 
}; 

var saveSettings = function() { 
    console.log('Save settings!'); 
}; 

$(document).ready(function() { 
    registerEventListener(eventTypes.on, '.cancelSettings', cancelSettings); 
    registerEventListener(eventTypes.on, '.saveSettings', saveSettings); 
});

的manifest.json：

{ 
    "manifest_version": 2, 
    "name": "HelloWorld", 
    "short_name": "HelloWorld", 
    "description": "", 
    "version": "0.0.1", 
    "minimum_chrome_version": "38", 

    "icons": { 
    "16": "assets/img/icons/16/icon_16.png", 
    "128": "assets/img/icons/128/icon_128.png" 
    }, 

    "permissions": [ 
    "webview", 
    "storage" 
    ], 

    "app": { 
    "background": { 
     "scripts": ["assets/js/jquery/jquery.min.js", 
        "assets/js/bootstrap.js", 
        "assets/js/background.js", 
        "assets/js/utils/utils.js", 
        "assets/js/settings.js"] 
    } 
    } 
}

的index.html：

<html> 
<head> 
    <script src="assets/js/jquery/jquery.min.js"></script> 
    <script src="assets/js/bootstrap.js"></script> 
    <script src="assets/js/utils/utils.js"></script> 

    <script src="assets/js/main.js"></script> 
</head> 
<body> 
... 
</body> 
</html>

settings.html：

<html> 
<head> 
    <script src="assets/js/jquery/jquery.min.js"></script> 
    <script src="assets/js/bootstrap.js"></script> 
    <script src="assets/js/utils/utils.js"></script> 

    <script src="assets/js/settings.js"></script> 
</head> 
<body> 
... 
</body> 
</html>

來源

2016-06-21 user316114

功能$（文件）。就緒（）被執行時根據jquery文檔，DOM已經準備就緒。

什麼，你可以嘗試在你的身體端移動與settings.js腳本標記。

因此，您的文件將在文檔準備就緒時執行。

只是一個測試，以檢查問題是否沒有準備好DOM。

來源

2016-06-21 20:10:57

我會嘗試，但考慮到console.log執行時，輸入index.html我沒有參考我猜這不會工作 – user316114

您引用的標籤是從另一塊Javascript動態創建的嗎？ –

Chrome應用程序阻止JS加載

回答

相關問題