Electron

Question

我四处寻找：文档、google 等，关于如何在电子应用程序的主 window 中加载 html 文件，但我不能'找不到方法。

真的这么复杂还是这么简单？

我想出的是 ajax，因此有效：

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

我发现的另一种方法是通过远程：

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

但这总是会打开一个新的 window，我需要替换现有的页面

Answer 1

如果您想在现有 window 中加载新的 URL，您可以在渲染器进程中执行此操作：

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

请注意，当加载新的 URL 时，Electron 会重新启动渲染器进程，因此您可能会在这种情况下看到闪光灯。这就是为什么在构建 Electron 应用程序时通常最好使用单页应用程序 (SPA) 架构。

Answer 2

我知道这个 post 很旧，但就 windows 加载新布局的问题而言，它是 Google 上最受欢迎的一个。

我遇到了同样的白色闪光问题，因为我没有使用任何单页框架，如 React 或 Vue.js（我打算将来使用）。因此，如果您不使用太多，您可以在主进程上创建一个函数来隐藏或显示您想要显示的 window 以使其看起来像单页应用程序。

您可以获取并设置每个 windows' 的大小和位置以使过渡效果更好：

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;

并且您可以使用如下预加载脚本将此函数公开给 window：

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

window.loadPage = mainProcess.loadPage;

不要忘记在主进程上初始化两个 windows：

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 - 如何将 html 文件加载到当前 window？

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

dom

v8

chromium

node.js