在按钮点击时无法调用HTML中的JavaScript函数

Question

在按钮点击时无法调用HTML中的JavaScript函数

javascripthtmlbuttongoogle-chrome-extension

4

我正在制作一个Chrome扩展，其中包含一个html文件、一个JavaScript文件（用于在新标签页中打开修改后的链接）、清单文件和图标。

它可以正常工作，但现在我希望JavaScript函数只在用户点击按钮时才运行。因此，我在html文件中添加了一个按钮，将js代码放入一个函数中，并使用onclick调用该函数。

但出现了问题，点击按钮时似乎没有反应。我已尝试重新加载扩展程序，还从另一个简单程序的工作示例中取得了灵感，这个程序点击按钮时会使用alert()显示一条简单的“Hello world”消息。

当我将其替换为自己的函数时，在点击按钮时却没有反应。请问有人能找到错误或问题吗？ urltry.html文件如下：

<!DOCTYPE html>
<html>
<button onclick="editorial()">View Editorial</button>
<script>
function editorial()
{
chrome.tabs.query({currentWindow: true, active: true}, function(tabs){
    var tab_url=tabs[0].url;
    var new_url=tab_url.slice(11);
    chrome.tabs.create({ url:"http://www.discuss." + new_url});        
});
}
</script>
</html>

- Naman Sancheti

我非常确定Chrome扩展不允许内联事件处理程序。我建议阅读https://developer.chrome.com/extensions/tut_migration_to_manifest_v2#inline_scripts - Oleg

可能是Chrome扩展内的onClick无法工作的重复问题。 - Xan

3个回答

1

您必须将按钮放在body标签内，否则会发生许多问题，可能会导致浏览器进入怪异模式。

解决方法：

<!DOCTYPE html>
<html>
<head>
<script>
function editorial()
{
chrome.tabs.query({currentWindow: true, active: true}, function(tabs){
    var tab_url=tabs[0].url;
    var new_url=tab_url.slice(11);
    chrome.tabs.create({ url:"http://www.discuss." + new_url});        
});
}
</script>
</head>
<body>
   <button onclick="editorial()">View Editorial</button>
</body>
</html>

- Adam M.

不会发生任何问题。Chrome会自动创建<body>元素并将脚本和按钮包含在其中。 - Oleg

0

你可以尝试这个：

<body>
  <button onclick="javascript:editorial()">View Editorial</button>
</body>

这也适用于微软EDGE浏览器。

- Hardik Leuwa

它可能在Edge上运行，但这并不是重点：这在Chrome扩展中不起作用。 - Teepeemm

它必须在Chrome、IE、Edge、Firefox和Maxthon中都能正常工作。 - Hardik Leuwa

在Chrome的扩展程序中工作与在Chrome中工作是不同的。扩展程序明确禁止onclick。请参阅文档。 - Teepeemm

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Oleg · Accepted Answer

由于 Google Chrome 扩展中默认的内容安全策略（CSP），以下内容被禁止：

Eval 和相关函数
内联 JavaScript

Google Chrome 扩展文档上关于 SCP 的建议是将代码放置到单独的文件中，并使用适当的绑定方式从 JavaScript 绑定到点击事件。请参见下面的示例。

您的 HTML 文件：

<!DOCTYPE html>
<html>
<head>
  <script src="editorial.js"></script>
</head>
<body>
  <button id="viewEditorial">View Editorial</button>
</body>
</html>

您的 JavaScript 文件，editorial.js

function editorial() {
  chrome.tabs.query({currentWindow: true, active: true}, function(tabs){
    var tab_url=tabs[0].url;
    var new_url=tab_url.slice(11);
    chrome.tabs.create({ url:"http://www.discuss." + new_url});        
  });
}

document.addEventListener('DOMContentLoaded', function () {
  var btn = document.getElementById('viewEditorial');
  if (btn) {
    btn.addEventListener('click', editorial);
  }
});

注意：不要忘记声明"tabs"权限，才能修改URL。请参阅标签页文档。