首頁猿問 Chrome擴展中的onClick不工作

Chrome擴展中的onClick不工作

JavaScript

冉冉說 2019-06-01 13:46:59

Chrome擴展中的onClick不工作這似乎是最容易做的事情，但它只是不起作用。在普通瀏覽器中.html和.js文件運行良好，但在Chrome擴展中onClick函數不是執行它應該做的事情。.js文件：function hellYeah(text) { document.getElementById("text-holder").innerHTML = text;}.html文件：<!doctype html><html> <head> <title> Getting Started Extension's Popup </title> <script src="popup.js"></script> </head> <body> <div id="text-holder"> ha </div> <br /> <a onClick=hellYeah("xxx")> hyhy </a> </body></html>因此，基本上，一旦用戶單擊“hyhy”，“ha”應改為“xxx”。再說一遍，它在瀏覽器中工作得很好，但在擴展中卻不起作用。你知道為什么嗎？以防萬一，我也會在下面附于清單.json。提前謝謝！明顯.json：{ "name": "My First Extension", "version": "1.0", "manifest_version": 2, "description": "The first extension that I made.", "browser_action": { "default_icon": "icon.png", "default_popup": "popup.html" }, "permissions": [ "http://api.flickr.com/" ]}

查看完整描述

4 回答

慕斯王

TA貢獻1864條經驗獲得超2個贊

Chrome擴展不允許您使用內聯JavaScript(文獻資料)。你將不得不做一些類似的事情。

為鏈接分配一個ID(<a onClick=hellYeah("xxx")>成<a id="link">)，并使用addEventListener來綁定事件。將以下內容放入您的popup.js檔案：

document.addEventListener('DOMContentLoaded', function() {
    var link = document.getElementById('link');
    // onClick's logic below:
    link.addEventListener('click', function() {
        hellYeah('xxx');
    });});

反對回復 2019-06-01

慕容森

TA貢獻1853條經驗獲得超18個贊

原因

這不起作用，因為Chrome禁止任何類型的內聯代碼。通過內容安全策略進行擴展。

內聯JavaScript不會被執行。這一限制既禁止內聯，也禁止內聯。<script>砌塊和內聯事件處理程序(例如：<button onclick="...">).

如何檢測

如果這確實是問題所在，Chrome將在控制臺中產生以下錯誤：

拒絕執行內聯腳本，因為它違反了以下內容安全策略指令：“script-src‘Self’chrom-擴展名：”。要么是‘不安全-內聯’關鍵字，要么是散列(‘sha256-.’)，或者是現在(‘none-.’)需要啟用內聯執行。

要訪問彈出窗口的JavaScript控制臺(通常對調試有用)，右鍵單擊擴展按鈕并從上下文菜單中選擇“檢查彈出”。

有關調試彈出窗口的更多信息可用。這里.

如何修復

需要刪除所有內聯JavaScript。的確有Chrome文檔指南.

假設原來的樣子是：

<a onclick="handler()">Click this</a> <!-- Bad -->

需要移除onclick屬性，并為元素提供一個唯一的id：

<a id="click-this">Click this</a> <!-- Fixed -->

然后從腳本(必須在.js文件，假設popup.js):

// Pure JS:document.addEventListener('DOMContentLoaded', function() {
  document.getElementById("click-this").addEventListener("click", handler);});// The handler also must go in a .js filefunction handler() {
  /* ... */}

請注意DOMContentLoaded事件。這確保元素在執行時存在?，F在添加腳本標記，例如在<head>文件：

<script src="popup.js"></script>

如果使用jQuery，則可以選擇：

// jQuery$(document).ready(function() {
  $("#click-this").click(handler);});

放寬政策

問：該錯誤提到了允許內聯代碼的方法。我不想/不能更改我的代碼，如何啟用內聯腳本？

答：不管錯誤怎么說，你不可能啟用內聯腳本:

沒有任何機制可以放松對執行內聯JavaScript的限制。特別是，設置腳本策略，其中包括'unsafe-inline'不會有任何效果。

最新情況：從Chrome 46開始，可以白化特定的內聯代碼塊：

從Chrome 46開始，可以通過在策略中指定源代碼的base 64編碼哈希來白化內聯腳本。此散列必須以所使用的哈希算法(Sha 256、Sha 384或Sha 512)作為前綴?？匆?/trans>散列用法<script>元素舉個例子。

但是，我不太清楚使用它的原因，而且它也不會啟用內聯屬性，例如onclick="code".

反對回復 2019-06-01

開心每一天1111

TA貢獻1836條經驗獲得超13個贊

我決定公布我在我的案例中使用的例子。我試圖用腳本替換div中的內容。我的問題是Chrome沒有識別/沒有運行這個腳本。

更詳細地說，我想要做的是：單擊一個鏈接，并將該鏈接“讀取”一個外部html文件，將其加載到div部分中。

我發現，通過使用調用的ID將腳本放在DIV之前，腳本無法工作。
如果腳本在另一個DIV中，它也不能工作。

腳本必須使用document.addEventListener(‘DOMContentLoade’)編寫，函數()

    <body>
    <a id=id_page href ="#loving"   onclick="load_services()"> loving   </a>

        <script>
                // This script MUST BE under the "ID" that is calling
                // Do not transfer it to a differ DIV than the caller "ID"
                document.getElementById("id_page").addEventListener("click", function(){
                document.getElementById("mainbody").innerHTML = '<object data="Services.html" class="loving_css_edit"; >
                </object>'; });
            </script>
    </body>

  <div id="mainbody" class="main_body">
        "here is loaded the external html file when the loving link will 
         be  clicked. "  </div>

反對回復 2019-06-01

4 回答
0 關注
1825 瀏覽

關注

添加回答

舉報

0/150

提交

取消

亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

熱搜

最近搜索清空

Chrome擴展中的onClick不工作

Chrome擴展中的onClick不工作

4 回答

原因

如何檢測

如何修復

放寬政策

添加回答