如何在Electron应用中点击按钮切换当前窗口加载的HTML文件？

你当前代码的核心问题是点击事件内执行了new BrowserWindow()逻辑，每次调用都会创建独立的新窗口，要实现当前窗口替换页面，可选用以下三种方案：

方案1：渲染进程直接跳转（最简实现） #

无需调用Electron专属API，直接用浏览器原生跳转逻辑即可，修改renderer.js代码：

const newWindowBtn = document.getElementById('change')
newWindowBtn.addEventListener('click', () => {
  window.location.href = './new.html'
})

该方案不需要配置任何Electron权限，适配所有Electron版本。

方案2：通过remote模块操作当前窗口 #

如果需要调用Electron窗口相关API完成跳转，可通过remote获取当前窗口实例调用loadFile方法，需要先配置主进程权限：

1. 修改main.js中窗口创建的配置，开启渲染进程调用remote的权限：

// main.js createWindow函数内创建窗口部分
const mainWindow = new BrowserWindow({    
  width: 800,    
  height: 600,
  webPreferences: {
    nodeIntegration: true,
    contextIsolation: false,
    enableRemoteModule: true
  }
})

2. 修改renderer.js代码：

const { getCurrentWindow } = require('electron').remote
const newWindowBtn = document.getElementById('change')

newWindowBtn.addEventListener('click', () => {
  const currentWindow = getCurrentWindow()
  currentWindow.loadFile('new.html')
})

注意：Electron 14及以上版本默认废弃remote模块，更推荐使用下方IPC通信方案。

方案3：IPC通信通知主进程操作（官方推荐） #

遵循Electron最新安全规范，通过跨进程通信实现页面切换，无需开启remote权限：

1. 在main.js中新增IPC事件监听：

// 顶部引入ipcMain
const { app, BrowserWindow, ipcMain } = require('electron')

// createWindow函数外新增监听逻辑
ipcMain.on('switch-to-new-page', (event) => {
  const targetWindow = BrowserWindow.fromWebContents(event.sender)
  targetWindow.loadFile('new.html')
})

2. 修改renderer.js代码，发送IPC请求：

const { ipcRenderer } = require('electron')
const newWindowBtn = document.getElementById('change')

newWindowBtn.addEventListener('click', () => {
  ipcRenderer.send('switch-to-new-page')
})

内容的提问来源于stack exchange，提问作者John Mayne