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

Chrome擴展中的onClick不工作

JavaScript

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

Chrome擴展中的onClick不工作這似乎是最容易做的事情，但它只是不起作用。在普通瀏覽器中.html和.js文件運行良好，但在Chrome擴展中onClick函數(shù)不是執(zhí)行它應(yīng)該做的事情。.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”應(yīng)改為“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條經(jīng)驗獲得超2個贊

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

為鏈接分配一個ID(<a onClick=hellYeah("xxx")>成<a id="link">)，并使用addEventListener來綁定事件。將以下內(nèi)容放入您的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條經(jīng)驗獲得超18個贊

原因

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

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

如何檢測

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

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

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

有關(guān)調(diào)試彈出窗口的更多信息可用。這里.

如何修復

需要刪除所有內(nèi)聯(lián)JavaScript。的確有Chrome文檔指南.

假設(shè)原來的樣子是：

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

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

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

然后從腳本(必須在.js文件，假設(shè)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事件。這確保元素在執(zhí)行時存在?，F(xiàn)在添加腳本標記，例如在<head>文件：

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

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

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

放寬政策

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

答：不管錯誤怎么說，你不可能啟用內(nèi)聯(lián)腳本:

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

最新情況：從Chrome 46開始，可以白化特定的內(nèi)聯(lián)代碼塊：

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

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

反對回復 2019-06-01

開心每一天1111

TA貢獻1836條經(jīng)驗獲得超13個贊

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

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

我發(fā)現(xiàn)，通過使用調(diào)用的ID將腳本放在DIV之前，腳本無法工作。
如果腳本在另一個DIV中，它也不能工作。

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

    <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 關(guān)注
1816 瀏覽

關(guān)注

添加回答

舉報

0/150

提交

取消

使用 Ctrl+D 可將網(wǎng)站添加到書簽

微信客服

購課補貼
聯(lián)系客服咨詢優(yōu)惠詳情

幫助反饋 APP下載

慕課網(wǎng)APP
您的移動學習伙伴

公眾號

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號

第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

熱搜

最近搜索清空

Chrome擴展中的onClick不工作

Chrome擴展中的onClick不工作

4 回答

原因

如何檢測

如何修復

放寬政策

添加回答