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

Question

I searched all around: docs, google, etc. about how to load the html file in the main window of the electronic application, but I can not find a way.

Is it really complicated or dead simple?

With what I selected, this is ajax, so it works:

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

Another method I found is via remote:

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

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

Answer 1

If you want to load the new URL into an existing window, you can do this during the rendering process:

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

, Electron URL-, , , , . Electron (SPA).

Answer 2

, , Google .

-, - , React Vue.js ( ). , , , , , .

, :

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;

, :

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

window.loadPage = mainProcess.loadPage;

:

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();
  });
}