Chrome AppがJSの読み込みを禁止する

2つのHTMLページを持つChromeアプリケーションを作成しようとしています。Chrome AppがJSの読み込みを禁止する

main.js
settings.js
utils.js：index.htmlとsettings.html

私は3つのJavaScriptファイルを作成しました。

utils.jsは、イベントや他のヘルパータイプの活動を登録するためのメソッドのセットです。

私は自分のアプリケーションを実行するとsettings.jsは、そのHTMLページが開かれていなくても実行されているようです。

目的の機能はsettings.htmlが頭の中でsettings.js呼び出すことです。 inside of $(document).ready()私は2つのイベントリスナを登録します。何が起こっているのは、アプリケーション全体が開くと、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

関数$（ドキュメント）.ready（）、それが実行されますjqueryのドキュメントによると、DOMは準備ができています。

は、あなたの体の終わりにsettings.jsでスクリプトタグを移動し、あなたがしようとすることができるものです。

文書が準備完了したらファイルが実行されます。

DOMの準備ができていないかどうかを確認するテストです。

出典

2016-06-21 20:10:57

私は試してみますが、console.logはindex.htmlが入力されたときに実行されます。参照がないと、どちらも動作しないと思います – user316114

参照したタグが別のJavascriptから動的に作成されていますか？ –

Chrome AppがJSの読み込みを禁止する

答えて

関連する問題