提问人：metkopetru 提问时间：11/4/2023 更新时间：11/6/2023 访问量：102
querySelector 或 addEventListener 不适用于 html 中的电子
querySelector or addEventListener is not working with electron in html
问：
我已经用电子开始了一个桌面项目。但是我的按钮不起作用，没有任何错误。以下是 HTML 代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="assets/bootstrap.min.css">
</head>
<body>
<h1>gangway app</h1>
<button class="btn btn-primary" id="sendBtn">Send</button>
<script>
const electron = require("electron")
const {ipcRenderer} = electron
let sendBtn = document.querySelector("#sendBtn");
sendBtn.addEventListener('click',()=>{
alert("Alert")
ipcRenderer.send("key","Gangway Test")
})
</script>
</body>
</html>
因此，当我开始我的项目时，我只有一个按钮，但它不起作用。我没有收到任何警报。此外，我尝试使用ipcRenderer发布数据并使用ipcMain在main.js中捕获它，但也没有任何数据出现。按钮 ID 有问题吗？
答：
1赞
Leonardo Gazdek
11/4/2023
#1
你不能只在已被弃用的 HTML 文件中使用 require（“electron”）。您一定一直在遵循旧教程。
请查看 Electron 快速入门指南。
编辑：出于安全考虑，在较新版本的 Electron 中已弃用从渲染器进程直接访问 Electron API。
Electron 引入了上下文隔离。正如文档中提到的，上下文隔离是一个功能，可以确保你的预加载脚本和 Electron 的内部逻辑在单独的上下文中运行，与你在 webContents 中加载的网站不同。这对于安全目的很重要，因为它有助于防止网站访问 Electron 内部或您的预加载脚本可以访问的强大 API。
您需要创建一个预加载脚本，以将 ipcRenderer send 方法公开给渲染器进程。
// preload.js
const { contextBridge, ipcRenderer } = require('electron');
contextBridge.exposeInMainWorld('electron', {
sendIpcMessage: (channel, data) => {
ipcRenderer.send(channel, data);
}
});
您需要将此脚本传递给渲染器进程：
// main.js
const { app, BrowserWindow, ipcMain } = require('electron')
const path = require('node:path')
const createWindow = () => {
const win = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
preload: path.join(__dirname, 'preload.js')
}
})
ipcMain.on('key', (event, key) => {
alert(`received ${key}`)
})
win.loadFile('index.html')
}
app.whenReady().then(() => {
createWindow()
})
您现在应该能够在渲染器中访问该方法：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="assets/bootstrap.min.css">
</head>
<body>
<h1>gangway app</h1>
<button class="btn btn-primary" id="sendBtn">Send</button>
<script>
const { sendIpcMessage } = window.electron;
let sendBtn = document.querySelector("#sendBtn");
sendBtn.addEventListener('click', () => {
alert("Alert");
sendIpcMessage("key", "Gangway Test");
});
</script>
</body>
</html>
请注意，我还没有对此进行测试，但这是根据文档您需要做什么的粗略想法。
评论
0赞
T.J. Crowder
11/4/2023
现在，这基本上是一个仅链接的答案。请从链接中总结相关信息，而不是做什么。链接腐烂，并非所有网站都可以访问所有用户（更多细节在链接的元问答中）。require("electron")
0赞
metkopetru
11/4/2023
我需要 ipcRenderer 的电子，但也只有警报不起作用。
0赞
metkopetru
11/4/2023
如果你是认真的，我在 main.js 中完全安装了电子。
0赞
Leonardo Gazdek
11/4/2023
我已经编辑了答案。您将需要稍微改变您的项目结构。
0赞
Arkellys
11/4/2023
您在代码示例中忘记了 main 上的侦听器。on
0赞
WaLid LamRaoui
11/4/2023
#2
直接调用在电子中不起作用，尝试使用alertwindow.alert() instead
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="assets/bootstrap.min.css">
</head>
<body>
<h1>gangway app</h1>
<button class="btn btn-primary" id="sendBtn">Send</button>
<script>
const electron = require("electron")
const {ipcRenderer} = electron
let sendBtn = document.querySelector("#sendBtn");
sendBtn.addEventListener('click',()=>{
window.alert("Alert")
ipcRenderer.send("key","Gangway Test")
})
</script>
</body>
</html>
但是，如果通知不仅仅是用于测试，最好使用通知之类的东西。
评论
window.alert()