如何更改 Electron 中使用的 html 文件？
Posted
技术标签:
【中文标题】如何更改 Electron 中使用的 html 文件？【英文标题】：How to change the used html file in Electron? 【发布时间】：2021-12-01 23:01:01 【问题描述】：我正在尝试更改 Electron 应用程序中使用的 html 文件。我在 *** 上尝试了几个建议，但我无法实现任何目标。我的代码如下：
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>
感谢您的回答！
【参考方案1】：
您可以在此功能中使用location.href='new.html'在一个窗口中切换页面。
【讨论】：
以上是关于如何更改 Electron 中使用的 html 文件？的主要内容，如果未能解决你的问题，请参考以下文章
如何使用 package.json 脚本同时使用 webpack 监视我的 .ts 文件的更改并运行 Electron？