I am trying to change the html file used in the Electron app. I tried several suggestions here on StackOverFlow, but I am unable to achieve anything. My code is as follows:
main.js:
<!DOCTYPE html>
<html>
<head>
<script src="renderer.js"></script>
</head>
<body>
<h1>One</h1>
<button id="change">Change</button>
</body>
</html>
new.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");
})
I am trying to change the html file to new.html once one clicks on the button in the index.html.
you can use location.href='new.html' in this function to change page in one window.