单击按钮时无法在html中调用JavaScript函数 [英] Unable to call JavaScript function in html on button click
问题描述
我正在制作一个Chrome扩展程序，为此，我有一个html文件，一个JavaScript文件(可在新标签页中打开修改后的链接)，清单文件和图标.
I was making a Chrome extension, for which I have an html file, a JavaScript file which opens a modified link in a new tab, the manifest file and the icon.
它可以正常工作，但是现在我希望javascript函数仅在用户单击按钮时才能工作.因此，我在html文件中创建了一个按钮，将js代码放入函数中，并使用onclick调用了该函数.
It works fine but now I want the javascript function to work only when the user clicks a button. So I made a button in the html file, put the js code inside a function and called the function using onclick.
但是由于某种原因，它不起作用.单击该按钮似乎没有任何反应.我尝试重新加载扩展程序.另外，我以一个简单程序的工作示例为例，在该程序中，单击按钮时，使用alert()显示一条简单的"Hello world"消息.
But for some reason, it is not working. On clicking the button nothing seems to happen. I have tried reloading the extension. Also, I took a working example of a simple program in which on clicking the button, a simple "Hello world" message is displayed using alert().
当我直接在chrome中打开html页面时，这很好用，但是当我用我制作的功能替换它时，单击似乎没有任何反应.
This works fine when I open the html page directly in chrome but when I replaced this with the function that I made, nothing seems to happen on clicking.
有人可以找到错误/问题吗?
Can someone please find the bug/problem?
urltry.html文件为:
The urltry.html file is:
<!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>
推荐答案
由于Google Chrome扩展程序中默认的内容安全策略(CSP)，因此不允许以下操作:
Due to the default Content Security Policy (CSP) in Google Chrome extensions, the following is disallowed:
- 评估和相关功能
- 内嵌JavaScript
SCP上的Google Chrome扩展文档提供的建议是将代码放置在一个单独的文件，并使用适当的绑定来单击JavaScript中的click事件.见下文.
The suggestion, as provided by Google Chrome Extensions documentation on SCP is to place the code to a separate file and use proper binding to click event from JavaScript. See below.
您的HTML文件:
<!DOCTYPE html>
<html>
<head>
<script src="editorial.js"></script>
</head>
<body>
<button id="viewEditorial">View Editorial</button>
</body>
</html>
您的JavaScript文件 editorial.js
Your JavaScript file, 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.请参见标签文档.
Note: don't forget that you need to declare "tabs" permission to be able to modify the URL. See the tabs documentation.
这篇关于单击按钮时无法在html中调用JavaScript函数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
