Electron - 如何将 html 文件加载到当前窗口中？答案

【问题标题】：Electron - How to load a html file into the current window?Electron - 如何将 html 文件加载到当前窗口中？
【发布时间】：2016-10-05 18:11:04
【问题描述】：

我四处寻找：文档、谷歌等，关于如何在电子应用程序的主窗口中加载 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')

但这总是打开一个新窗口，我需要替换现有页面

【问题讨论】：

当应用启动时，您使用var window = new BrowserWindow(...); 和window.loadURL('file://${__dirname}/index.html'); 加载初始页面，因此只需再次使用window.loadURL。
window.loadUrl() 打开一个新窗口，我需要在当前窗口中加载文件，但最重要的是在 runtime
你在重用变量'win'吗？我自己的经验使用过 spa 路由，但似乎 loadURL 应该针对创建的窗口对象。
温泉路由，请告诉我。

标签： node.js dom electron v8 chromium

【解决方案1】：

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

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

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

【讨论】：

终于有答案了，谢谢！顺便说一句，SPA 是我的第一个想法（我通常开发 MVC 应用程序），但除了安装对我的项目来说很重的 Angular 之外，我找不到任何其他方法。在 electron 中如何实现 SPA？
@EdmondTamas Angular 并不是唯一的 SPA 框架，React（及其变体）、Vue.js、Aurelia 以及基本上任何其他现代前端框架都可以在 Electron 中使用。跨度>
@VadimMacagon 我试过这种方式，如果我想加载 URL，它可以正常工作，但你能告诉我如何在新页面中加载我的 HTML 吗？其实我才刚开始学Electron。 :)
远程模块在 Electron 12 中已弃用，将在 Electron 14 中删除。它被 @electron/remote 模块取代。 github.com/electron/remote

【解决方案2】：

我知道这篇文章已经很老了，但就为 Windows 加载新布局的问题而言，它是 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();
  });
}

【讨论】：