web-dev-qa-db-ja.com

Electron-現在のウ​​ィンドウにhtmlファイルをロードする方法は？

電子アプリのメインウィンドウに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')

しかし、これは常に新しいウィンドウを開き、既存のページを置き換える必要があります

node.jsdomelectronv8chromium
6
Edmond Tamas

既存のウィンドウに新しいURLをロードする場合は、レンダラープロセスでこれを行うことができます。

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

Electronは、新しいURLがロードされるとレンダラープロセスを再開するため、それが発生するとフラッシュが表示される可能性があることに注意してください。これが、Electronアプリを構築するときに、通常、シングルページアプリケーション（SPA）アーキテクチャを使用するのが最善である理由です。

9
Vadim Macagon

この投稿はかなり古いことは知っていますが、Windowsの新しいレイアウトを読み込むという点で、Googleで最も人気のある投稿です。

ReactまたはVue.js（将来的に使用する予定です）のような単一ページフレームワークを使用していないため、同じホワイトフラッシュの問題が発生しました。したがって、使用していない場合も、メインプロセスで、表示するウィンドウを表示または非表示にする関数を作成して、1ページのアプリのように見せることができます。

各ウィンドウのサイズと位置を取得および設定して、遷移を改善できます。

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();
  });
}
0
Oğulcan Çelik