如何使用新的 html 文件打开更新电子浏览器窗口

我是电子新手。我有两个 html 页面，我想在单击按钮时打开第二个页面。我的代码如下，但我只是得到一个空白窗口；不是第二页。

这是index.js

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

app.on('ready',()=>{
  let win = new BrowserWindow({width:960, hehight:540})
  win.loadURL(`file://${__dirname}/login.html`)
})

exports.openWindow = (fileName) => {
  let win = new BrowserWindow({width:960, height:540})
  win.loadURL(`file://${__dirname}/` + fileName + `.html`)
}

这是登录.js

const remote = require('electron').remote
const index = remote.require('./index.js')

var login = document.getElementById('login')
login.addEventListner('click', () => {
  var window = remote.getCurrentWindow()
  index.openWindow('pageTwo')
  window.close()
}, false)

Login 是 html 按钮的 id。

我想要第二页。我该如何执行此操作？

您可以通过使用 IPCRenderer 和 IPCMain 轻松实现此目的，以便在主进程和渲染器之间传递消息。

index.js

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

app.on('ready',()=>{
  let win = new BrowserWindow({width:960, hehight:540})
  win.loadURL(`file://${__dirname}/login.html`)
})

ipcMain.on('open-new-window', (event, fileName) => {
  let win = new BrowserWindow({width:960, height:540})
  win.loadURL(`file://${__dirname}/` + fileName + `.html`)
}

如您所见，我更改了您的代码只是为了添加ipcMain并接收来自渲染器的消息。

login.js

const {ipcRenderer} = require('electron');

let login = document.getElementById('login');
login.addEventListner('click', () => {
  ipcRenderer.send('open-new-window', 'pageTwo');
}, false);

login.js 也是如此ipcRenderer.

该文档解释得比我更好，并且可以找到这里是 ipcMain https://electron.atom.io/docs/api/ipc-main/ and 这里是 ipcRenderer https://electron.atom.io/docs/api/ipc-renderer/.