Collectives™ on Stack Overflow

Find centralized, trusted content and collaborate around the technologies you use most.

Teams

Q&A for work

Connect and share knowledge within a single location that is structured and easy to search.

I am new to electron. I have two html pages and I want to open the second page when a button clicked. I have code this as follow, but I just get a blank window; not the second page.

This is 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`)
This is login.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 is the id of the html button.
I want to get the page two. How can I perform this?
                @VictoryOsikwemhe it is okay to update the current window. I jus want to open the second page and close the first one.
– anjuc
                Jul 5, 2017 at 17:13
You can easily achieve this by using IPCRenderer and IPCMain in order to pass the messages between the main process and the renderer.
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`)
As you can see, I altered your code only to add ipcMain and receive the message from the renderer.
login.js
const {ipcRenderer} = require('electron');
let login = document.getElementById('login');
login.addEventListner('click', () => {
  ipcRenderer.send('open-new-window', 'pageTwo');
}, false);
The same goes for login.js and ipcRenderer.
The documentation explains way better than I do and can be found here for ipcMain and here for ipcRenderer.
I have looked at your code and from what I see you are requiring your main process, you can't do this, you need to use IPC to send a message from your render process or use the remote BrowserWindow object and get the window from an ID and use loadURL.
Using IPC
index.js
const { ipcMain } = require("electron");
ipcMain.on("changeWindow", function(event, arg) {
    switch (arg) {
        case "page1":
            win.loadURL("Page1 URL");
            break;
        case "page2":
            win.loadURL("Page2 URL");
            break;
        case "page3":
            win.loadURL("Page3 URL");
            break;
login.js
const { ipcRenderer } = require("electron");
function onButtonClick() {
    ipcRenderer.send("changeWindow", "page2");
    let win = BrowserWindow.fromId("ID of your window");
    win.loadURL("URL you want to load (your login.html file)");
// OR
function onButtonClick() {
    let win = BrowserWindow.getFocusedWindow();
    win.loadURL("URL you want to load (your login.html file)");
// OR
function onButtonClick() {
        Not the best method but would work.
    let wins = BrowserWindow.getAllWindows();
    let windowIndex = /* index of your window in the wins array */
    wins[windowIndex].loadURL("URL you want to load (your login.html file)");
accessing a required functionality with the remote api from the renderer process at times result in a deadlock when ever you call that functionlaity with an argument. You should do this , using ipc
 // main process
  const { app, BrowserWindow, ipcMain: ipc } = require("electron");
  let win;
  app.on("ready", () => {
    win = new BrowserWindow();
    win.loadURL(`file://${__dirname}/index.html`);
 ipc.on("send-window-id", (event) => {
    event.sender.send("window-id-sent", win.id);
// renderer process
   <head></head>
      <button>new window</button>
      <script>
         const { remote: { BrowserWindow }, ipcRenderer: ipc } = require("electron");
         var button = document.querySelector("button");
         button.addEventListener("click", event => {
           let win = new BrowserWindow();
           win.loadURL(`file://${__dirname}/page2.html`);
           ipc.send("send-window-id");
        ipc.on("window-id-sent", (event,id) => {
           BrowserWindow.fromId(id).close();
     </script>
   </body>
</html>
The BrowserWindow.fromId recieves the id of a window and returns the window object of that id
        
Thanks for contributing an answer to Stack Overflow!
Please be sure to answer the question. Provide details and share your research!
But avoid …
Asking for help, clarification, or responding to other answers.
Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.