無法在按鈕單擊時調用html中的JavaScript函數

Question

我正在制作Chrome擴展程序，我有一個html文件，一個JavaScript文件，可以在新標簽頁中打開修改過的鏈接，清單文件和圖標。

它工作正常但現在我希望javascript函數只在用戶單擊按鈕時才能工作。 所以我在html文件中創建了一個按鈕，將js代碼放在一個函數中，並使用onclick調用該函數。

但由於某種原因，它不起作用。 點擊按鈕似乎沒有任何事情發生。 我試過重新加載擴展程序。 另外，我舉了一個簡單程序的工作示例，在單擊按鈕時，使用alert（）顯示一個簡單的“Hello world”消息。

當我直接在chrome中打開html頁面時這很好用但是當我用我做的函數替換它時，點擊時似乎沒有任何結果。

有人可以找到錯誤/問題嗎？

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>

Answer 1

由於Google Chrome擴展程序中的默認內容安全政策（CSP），以下內容不允許：

評估和相關功能
內聯JavaScript

關於SCP的Google Chrome擴展程序文檔提供的建議是將代碼放在單獨的文件中，並使用適當的綁定來從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。 請參閱選項卡文檔。

Answer 2

你必須將你的按鈕放在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>

Answer 3

你可以試試這個，

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

這也適用於Microsoft EDGE瀏覽器。

無法在按鈕單擊時調用html中的JavaScript函數

問題描述

3 個解決方案

解決方案1
3 已采納 2014-08-30 09:44:29

解決方案2
1 2014-08-30 09:25:10

解決方案3
0 2017-01-07 13:06:18

無法在按鈕單擊時調用html中的JavaScript函數

問題描述

3 個解決方案

解決方案1 3 已采納 2014-08-30 09:44:29

解決方案2 1 2014-08-30 09:25:10

解決方案3 0 2017-01-07 13:06:18

解決方案1
3 已采納 2014-08-30 09:44:29

解決方案2
1 2014-08-30 09:25:10

解決方案3
0 2017-01-07 13:06:18