Electron - How to load a html file into the current window?

Question

I was looking all around: docs, google, etc., on how to load a html file in the main window of an electron app, but I can't find a way.

Is it really this complicated or dead simple?

With what I have came up is ajax, thus works:

$("#main").load("./views/details.html");

Another method I have found is via remote:

const {BrowserWindow} = require('electron').remote
let win = new BrowserWindow({width: 800, height: 600})
win.loadURL('https://github.com')

But this opens always a new window, and I need to replace the existing page

When the app starts you load your initial page with `var window = new BrowserWindow(...);` and `window.loadURL('file://${__dirname}/index.html');` so simply use window.loadURL again. — Molda, Oct 05 '16 at 19:24
window.loadUrl() opens a new window, I need to load the file inside the current window, but most importantly at **runtime** — Edmond Tamas, Oct 05 '16 at 19:40
Are you reusing the variable 'win'? My own experience has used spa routing but it seems that loadURL should target the window object created. — Mike Cheel, Oct 05 '16 at 20:26

score 15 · Accepted Answer · answered Oct 06 '16 at 03:39

15

If you want to load a new URL in an existing window you can do this in the renderer process:

const { remote } = require('electron')
remote.getCurrentWindow().loadURL('https://github.com')

Note that Electron restarts the renderer process when a new URL is loaded, so you'll probably see a flash when that happens. This is why it's usually best to use a single page application (SPA) architecture when building Electron apps.

answered Oct 06 '16 at 03:39

Vadim Macagon

14,463
2
52
45

1

Finally an answer, thanks! By the way SPA was my first thought (I usually develop MVC apps) but I could not find any other way than installing Angular which is to heavy for my project. How do you achieve SPA in electron? – Edmond Tamas Oct 06 '16 at 04:40
@EdmondTamas Angular is not the only SPA framework out there, React (and it's variants), Vue.js, Aurelia, and basically any other modern front-end framework can be used in Electron. – Vadim Macagon Oct 06 '16 at 05:04
@VadimMacagon I tried this way and it works fine if I want to load URL but can you please let me know how can I load my HTML in new page? Actually I just started to learn Electron. :) – Sachin Shah Apr 26 '20 at 08:08
The remote module was deprecated in Electron 12, and will be removed in Electron 14. It is replaced by the @electron/remote module. https://github.com/electron/remote – Dibish Mar 01 '22 at 10:28

score 0 · Answer 2 · answered Oct 07 '19 at 13:42

I know this post is quite old but it's the most popular one on Google in terms of the question of loading new layouts for windows.

I had the same white flash issue because I'm not using any single page framework like React or Vue.js (I'm planning to in the future). So if you are not using too, you can create a function on the main process that hides or shows which window you want to show to make it look like one-page app.

You can get and set each windows' size and position to make the transition better:

function loadPage(page) {


  if (page == "landing") {
    landingWindow.setSize(uiWindow.getSize()[0],uiWindow.getSize()[1])
    landingWindow.setPosition(uiWindow.getPosition()[0],uiWindow.getPosition()[1])
    landingWindow.show()
    uiWindow.hide()
  } else if (page == "main") {
    uiWindow.getSize(landingWindow.getSize()[0],landingWindow.getSize()[1])
    uiWindow.setPosition(landingWindow.getPosition()[0],landingWindow.getPosition()[1])
    uiWindow.show()
    landingWindow.hide()
  }

exports.loadPage = loadPage;

And you can expose this function to window with a preload script like this:

const electron = require('electron')
const remote = electron.remote
const mainProcess = remote.require('./main')

window.loadPage = mainProcess.loadPage;

Don't forget to initialize both windows on the main process:

function createWindow() {
  // Create the browser window.
  landingWindow = new BrowserWindow({
    width: 1820,
    height: 720,
    /* fullscreen: true, */
    webPreferences: {
      nodeIntegration: false,
      preload: path.resolve(path.join(__dirname, "preloads/preload.js"))
    },
    show: false,
    backgroundColor: "#222831"
  });

  landingWindow.loadURL(
    url.format({
      pathname: path.join(__dirname, "src/landing.html"),
      protocol: "file:",
      slashes: true
    })
  );
  uiWindow = new BrowserWindow({
    width: 1820,
    height: 720,
    /* fullscreen: true, */
    webPreferences: {
      nodeIntegration: false,
      preload: path.resolve(path.join(__dirname, "preloads/preload.js"))
    },
    show: false,
    backgroundColor: "#222831"
  });

  uiWindow.loadURL(
    url.format({
      pathname: path.join(__dirname, "src/mainui.html"),
      protocol: "file:",
      slashes: true
    })
  );

  // and load the index.html of the app.
  // Open the DevTools.
  landingWindow.webContents.openDevTools();

  // Emitted when the window is closed.
  landingWindow.on("closed", () => {
    // Dereference the window object, usually you would store windows
    // in an array if your app supports multi windows, this is the time
    // when you should delete the corresponding element.
    landingWindow = null;
  });
  landingWindow.once("ready-to-show", () => {
    landingWindow.show();
  });
}

Electron - How to load a html file into the current window?

2 Answers2

Linked