在 HTML 元素上嵌入 onClick() 函数不起作用答案

【问题标题】：Embedding an onClick() function on an HTML element doesn't work在 HTML 元素上嵌入 onClick() 函数不起作用
【发布时间】：2019-11-16 14:47:49
【问题描述】：

chrome.storage.sync.get(['player_info'], (data) => {
    console.log('search')
    console.log(data)
    // data = list of possible players 
    let player_arr = data.player_info
    for (let i = 0; i < player_arr.length; i++) {
        document.getElementById("card-wrapper").innerHTML +=
            `<div onclick="alert('clicked')" class="player_option">
                <center>
                    <div class="card-img-small">
                        <a href="#">
                            <img id=\"player_img\" src="${player_arr[i].profile_img}" class="img-responsive">
                        </a>
                    </div>
                </center>
                <div class="card-body">
                    <div id="player-name" class="price-small">
                        ${player_arr[i].name}
                    </div>`
    }
})

我正在使用上面的代码动态呈现一些项目。在div 包装器中，我添加了一个alert 函数来检查它是否有效，但没有任何反应。我检查了元素，它看起来像这样：

<div onclick="alert('clicked')" class="player_option">
                <center>
                    <div class="card-img-small">
                        <a href="#">
                            <img id="player_img" src="https://fmdataba.com/images/p/4348.png" class="img-responsive">
                        </a>
                    </div>
                </center>
                <div class="card-body">
                    <div id="player-name" class="price-small">
                        Paul Pogba
                    </div></div></div>

似乎该功能已正确嵌入，但alert 没有发生。有什么帮助吗？

编辑

实际上意识到我收到了这个错误：Refused to execute inline event handler because it violates the following Content Security Policy directive: "script-src 'self' blob: filesystem: chrome-extension-resource:". Either the 'unsafe-inline' keyword, a hash ('sha256-...'), or a nonce ('nonce-...') is required to enable inline execution.我正在构建一个 Chrome 扩展

【问题讨论】：

你能用 console.log('132') 代替 alert() 吗？并检查
相同。它不起作用
你能分享一下小提琴吗？

标签： javascript html

【解决方案1】：

在 chrome 应用程序和扩展程序中，内容安全策略不允许内联 javascript。所以你必须把你的 javascript 放在一个 .js 文件中，并将它包含在你的 HTML 中。

您必须改用 js 事件侦听器。看看这个： Refused to execute inline event handler because it violates CSP. (SANDBOX)

如果你还想在onClick属性中使用js，你也可以更改Content Security Policy。在“放宽默认策略”下查看：Content Security Policy (CSP)。

【讨论】：