如何更改 Electron 中使用的 html 文件？答案

【问题标题】：How to change the used html file in Electron?如何更改 Electron 中使用的 html 文件？
【发布时间】：2021-12-01 23:01:01
【问题描述】：

我正在尝试更改 Electron 应用程序中使用的 html 文件。我在 StackOverFlow 上尝试了几个建议，但我无法实现任何目标。我的代码如下：

main.js:

<!DOCTYPE html>
<html>
    <head>
        <script src="renderer.js"></script>
    </head>
    <body>
        <h1>One</h1>
        <button id="change">Change</button>
    </body>
</html>

新的.html：

<!DOCTYPE html>
<html>
    <head></head>
    <body>
        <h1>Two</h1>
    </body>
</html>

main.js:

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

function createWindow () {  // Create the browser window.  
    const mainWindow = new BrowserWindow({    width: 800,    height: 600 })
    mainWindow.loadFile('index.html')
    mainWindow.openDevTools();
}

app.whenReady().then(() => {  
    createWindow()
    app.on('activate', function () {     
        if (BrowserWindow.getAllWindows().length === 0) createWindow()  
    })
})

renderer.js：

const {BrowserWindow} = require('electron').remote
const path = require('path')

const newWindowBtn = document.getElementById('change')

newWindowBtn.addEventListener('click', (event) => {
  let win = new BrowserWindow({ width: 400, height: 320 })

  win.on('close', () => { win = null })
  win.loadFile("new.html");
})

单击 index.html 中的按钮后，我正在尝试将 html 文件更改为 new.html。

【问题讨论】：

您在渲染器进程中创建了一个 BrowserWindow，但它不应该是。您的 BrowserWindow 已经存在（您已经在 main.js 中创建了它）。因此，请在您的 main.js 中保留对它的引用，然后从您的 Button 单击处理程序向主程序发送一条 IpcRenderer 消息，主程序将在此消息上使用处理程序进行侦听。最终在这个处理程序中使用新的 html 文件加载您已经存在的 BrowserWindow。
只需使用基本链接：<a href="new.html">Change</a>
感谢您的回答！

标签： javascript html electron

【解决方案1】：

您可以在此功能中使用location.href='new.html'在一个窗口中切换页面。

【讨论】：