Question

我正在尝试创建一个Chrome应用，其中有两个HTML页面。 index.html和settings.html

我创建了三个javascript文件：

main.js
settings.js
utils.js。

utils.js是一组注册事件和其他帮助程序类型活动的方法。

当我执行我的应用程序时settings.js似乎正在执行，即使该html页面尚未打开。

预期的功能是settings.html在头部调用settings.js。在$(document).ready()内部，我注册了两个事件监听器。发生的事情是，当整个应用程序打开时，settings.js被执行，因此它正在向一个尚不存在的dom元素注册一个事件监听器。

如何阻止settings.js在整个应用程序的输入时执行？

完整代码减去下面的html位

utils.js：

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>

Answer 1

函数$（document）.ready（）根据jquery文档在DOM准备好时执行。

您可以尝试的是在身体末端使用settings.js移动脚本标记。

因此，当文档准备就绪时，您的文件将被执行。

只是一个测试，以检查问题是否未准备好DOM。

Chrome App阻止JS加载

1 个答案: