Question

我正在使用Chrome应用，我将其开发为普通网页。它包含几个.js文件，并在点击和加载时调用一些函数。

<body onload="thisIsOnLoadFunction()">

<button class='btn btn-info btn-large icon-undo pull-right' onclick='cancelAll()'>

他们是其中的一部分。但是，当我将其作为应用程序运行时，它不能正常工作。

在控制台中显示错误

 Refused to execute inline event handler because it violates the following
 Content Security Policy directive: "default-src 'self' 
 chrome-extension-resource:".
 Note that 'script-src' was not explicitly set,
 so 'default-src' is used as a fallback

我怎样才能让它发挥作用。

Answer 1

您无法在应用中使用内联事件处理程序。这是一个安全问题。

包含一个JS文件，您可以在其中执行以下操作：

document.getElementById("some_id").addEventListener("click", some_function);

或直接使用 querySelector 附加事件 .. ById（“some_id”）。onclick 等。

通常将代码包装在：

中

document.addEventListener('DOMContentLoaded', function () {
  ....
});

作为添加事件监听器的额外注释。

如果需要将参数传递给函数，有多种方法。一种方法是使用闭包，另一种我觉得更清洁的方法是使用 bind 。因为这是一个应用程序，你不需要了解绑定浏览器功能。

示例：

function some_fun(i, e) {
    console.log(i); <-- This will be value of `i` in loop
    console.log(e); <-- This will be the event.
}

var p = document.getElementsByTagName('P'),
    i;

for (i = 0; i < p.length; ++i) {
    p[i].addEventListener("click", some_fun.bind(null, i));
}

bind（）的另一个非常有用的功能是传递上下文的能力。例如：

function MyObj(x, y) {
    this.x = x;
    this.y = y;
}

var my_obj = new MyObj(42, 13);

someElem.addEventListener("click", my_fun.bind(my_obj));

现在单击 someElem 时，您可以使用 this.x 之类的内容获得42。

在chrome app上调用一个函数

1 个答案: