在html中，queryError或addEventError无法与electron一起工作

7rfyedvj 于 8个月前发布在 Electron

关注(0)|答案(2)|浏览(68)

我已经开始了一个桌面项目与电子。但我的按钮不工作，没有任何错误。这里是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和捕捉它在main.js与ipcMain，但也没有任何数据来。我有什么问题与按钮ID？

electron

来源：https://stackoverflow.com/questions/77418800/queryselector-or-addeventlistener-is-not-working-with-electron-in-html

2条答案

按热度按时间

1dkrff031#

你不能只在HTML文件中使用require（“electron”），这已经被弃用了。你必须遵循一个旧的教程。
请看Electron quick start guide。
编辑：由于安全问题，从渲染器进程直接访问Electron API在新版本的Electron中已被弃用。
Electron引入了Context Isolation。正如文档中所提到的，上下文隔离是一种功能，可以确保您的预加载脚本和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）回复(0）举报 8个月前

0h4hbjxa2#

在electron中直接调用alert不起作用，请尝试使用window.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>

字符串
但是，如果不只是用于测试，最好使用像notification这样的东西。

赞(0）回复(0）举报 8个月前

我来回答

在html中，queryError或addEventError无法与electron一起工作

2条答案

相关问题

热门标签

最新问答