单击 HTML 按钮时，Electron JS 打开 window

Question

我用谷歌搜索了一下，这似乎是一个经常性的任务，但我没有找到好的解决方案，这是我的代码。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />

    <title>Hello World!</title>
  </head>
  <body>
    <h1 style="color: red">Todos</h1>
    <button type="button">Todos panel</button>
    <script>
      const btn = document.querySelector('button');
      button.addEventListener('click', () => {
        newtaskwindow();
      });
      function newtaskwindow() {
        const remote = require('electron').remote;
        const BrowserWindow = remote.BrowserWindow;
        const win = new BrowserWindow({
          height: 600,
          width: 800
        });

        win.loadFile('todos.html');
      }
    </script>
  </body>
</html>

这不起作用..我想点击按钮打开一个新的child window.

const { app, BrowserWindow, Menu } = require('electron');

function createWindow() {
  const win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true
    }
  });

  win.loadFile('index.html');
}

const todoWin = () => {
  const win = new BrowserWindow({
    width: 500,
    height: 400,
    modal: true,
    parent: ''
  });

  win.loadFile('todos.html');
};

// Menu
const isMac = process.platform === 'darwin';

const template = [
  ...(isMac
    ? [
        {
          label: 'Demo',
          submenu: [{ role: 'about' }]
        }
      ]
    : []),

  {
    label: 'File',
    submenu: [isMac ? { role: 'close' } : { role: 'quit' }]
  }
];

const menu = Menu.buildFromTemplate(template);
Menu.setApplicationMenu(menu);

app.whenReady().then(() => {
  createWindow();
});

app.on('window-all-closed', function () {
  if (process.platform !== 'darwin') app.quit();
});

Answer 1

我看到两件事...

在main.js中添加enableRemoteModule和contextIsolation

function createWindow() {
  const win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true,
      enableRemoteModule: true,
      contextIsolation:false

    }
  });

  win.loadFile('index.html');
}

在 index.html 中，您使用 button.addEventListener 而不是 btn.addEventListener。改变它。

    <script>
      const btn = document.querySelector('button');
      btn.addEventListener('click', () => {
        newtaskwindow();
      });
      function newtaskwindow() {
        const remote = require('electron').remote;
        const BrowserWindow = remote.BrowserWindow;
        const win = new BrowserWindow({
          height: 600,
          width: 800
        });

        win.loadFile('todos.html');
      }
    </script>

这样应该行得通。

警告
如 Electron 的文档 remote module is deprecated. You are encouraged to use IPC 所述，以便根据 renderer.

的请求在 main 上执行代码

Answer 2

   document.querySelector('form').addEventListener('submit', (e) => {
    e.preventDefault();
    const { ipcRenderer } = require('electron');
    const value = document.querySelector('input').value;
    ipcRenderer.send('todo:save', value);
    window.close();
  });

我是通过ipcRenderer搞定的

单击 HTML 按钮时，Electron JS 打开 window

Electron JS open window when click HTML Button

electron