electron报错:Refused to execute inline event handler because it violates the following Content 。。。

在Electron应用中,由于ContentSecurityPolicy限制,直接在HTML元素上使用onClick事件会报错。Chrome浏览器不允许内联执行事件处理器,需通过JavaScript的事件绑定方式,如使用getElementById获取元素并添加事件监听器来实现点击事件。示例代码展示了如何为按钮元素添加点击事件监听器。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

electron 页面添加 onClick 点击事件报错:Refused to execute inline event handler because it violates the following Content Security Policy directive: "script-src 'self'". Either the 'unsafe-inline' keyword, a hash ('sha256-...'), or a nonce ('nonce-...') is required to enable inline execution. Note that hashes do not apply to event handlers, style attributes and javascript: navigations unless the 'unsafe-hashes' keyword is present.

原因:谷歌浏览器不支持在元素上直接添加 onClick 事件

解决办法:使用 id 或 class 事件绑定点击监听事件即可

let button = document.getElementById('button')
button.addEventListener('click', () => {
    console.log('getSystemMemoryInfo1:', process.env);

})

该错误提示是由内容安全策略(Content Security Policy)引起的,意思是拒绝执行内联脚本,因为它违反了"script-src 'self'"的安全策略指令。 要解决这个问题,有几种方法可以尝试: 1. 方法一是去掉或修改Content Security Policy的策略指令。可以在页面的头部添加以下内容来修改策略指令: `<meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self'">`[2] 这样可以将script-src指令设置为允许从同源('self')加载脚本。 2. 方法二是不采用内联脚本,而是将脚本代码放在外部文件中,然后通过`<script>`标签引入外部文件。这样可以避免内联脚本被拒绝执行的问题。 3. 方法三是修改内容安全策略,列出允许执行的脚本代码的Hash值。这个方法比较复杂,需要计算脚本代码的Hash值并在策略指令中指定。详细的步骤可以参考相关资料。 总结起来,你可以通过修改或去掉Content Security Policy策略指令,或者将脚本代码放在外部文件中来解决这个问题。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* [Chrome扩展页面动态绑定JS事件提示错误](https://download.youkuaiyun.com/download/weixin_38716563/13585425)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"] - *2* *3* [ElectronRefused to execute inline script because it violates the following Content Security Policy](https://blog.youkuaiyun.com/qq_42374676/article/details/121336166)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值