如何使用新的 html 文件打开更新电子浏览器窗口答案

【问题标题】：How to open update electron browser window with a new html file如何使用新的 html 文件打开更新电子浏览器窗口
【发布时间】：2017-12-09 11:19:53
【问题描述】：

我是电子新手。我有两个 html 页面，我想在单击按钮时打开第二个页面。我有如下代码，但我只是得到一个空白窗口；不是第二页。

这是 index.js

const electron = require('electron')
const {app, BrowserWindow} = electron

app.on('ready',()=>{
  let win = new BrowserWindow({width:960, hehight:540})
  win.loadURL(`file://${__dirname}/login.html`)
})

exports.openWindow = (fileName) => {
  let win = new BrowserWindow({width:960, height:540})
  win.loadURL(`file://${__dirname}/` + fileName + `.html`)
}

这是 login.js

const remote = require('electron').remote
const index = remote.require('./index.js')

var login = document.getElementById('login')
login.addEventListner('click', () => {
  var window = remote.getCurrentWindow()
  index.openWindow('pageTwo')
  window.close()
}, false)

我想要第二页。我该怎么做？

【问题讨论】：

你想让第二个 html 文件在不同的浏览器窗口中加载吗？
@VictoryOsikwemhe 可以更新当前窗口。我只想打开第二页并关闭第一页。

标签： javascript html electron

【解决方案1】：

我查看了你的代码，从我看到你需要你的主进程，你不能这样做，你需要使用IPC从你的渲染进程发送消息或使用远程BrowserWindow对象并从 ID 获取窗口并使用 loadURL。

使用 IPC

index.js

const { ipcMain } = require("electron");

ipcMain.on("changeWindow", function(event, arg) {
    switch (arg) {
        case "page1":
            win.loadURL("Page1 URL");
            break;
        case "page2":
            win.loadURL("Page2 URL");
            break;
        case "page3":
            win.loadURL("Page3 URL");
            break;
        ...
    }
});

const { ipcRenderer } = require("electron");

function onButtonClick() {
    ipcRenderer.send("changeWindow", "page2");
}

远程使用 BrowserWindow 的第二个选项。

const { BrowserWindow } = require("electron").remote;

function onButtonClick() {
    let win = BrowserWindow.fromId("ID of your window");

    win.loadURL("URL you want to load (your login.html file)");
}

// OR

function onButtonClick() {
    let win = BrowserWindow.getFocusedWindow();

    win.loadURL("URL you want to load (your login.html file)");
}

// OR

function onButtonClick() {
    /*
        Not the best method but would work.
     */

    let wins = BrowserWindow.getAllWindows();

    let windowIndex = /* index of your window in the wins array */

    wins[windowIndex].loadURL("URL you want to load (your login.html file)");
}

【讨论】：

【解决方案2】：

您可以通过使用 IPCRenderer 和 IPCMain 轻松实现此目的，以便在主进程和渲染器之间传递消息。

index.js

const electron = require('electron')
const {app, BrowserWindow, ipcMain} = electron

app.on('ready',()=>{
  let win = new BrowserWindow({width:960, hehight:540})
  win.loadURL(`file://${__dirname}/login.html`)
})

ipcMain.on('open-new-window', (event, fileName) => {
  let win = new BrowserWindow({width:960, height:540})
  win.loadURL(`file://${__dirname}/` + fileName + `.html`)
}

如您所见，我更改了您的代码，只是添加了ipcMain 并接收来自渲染器的消息。

const {ipcRenderer} = require('electron');

let login = document.getElementById('login');
login.addEventListner('click', () => {
  ipcRenderer.send('open-new-window', 'pageTwo');
}, false);

文档解释得比我好，可以在 here for ipcMain 和 here for ipcRenderer 找到。

【讨论】：

【解决方案3】：

当您使用参数调用该功能时，有时从渲染器进程使用远程 api 访问所需功能会导致死锁。你应该这样做，使用ipc

 // main process
  const { app, BrowserWindow, ipcMain: ipc } = require("electron");
  let win;
  app.on("ready", () => {
    win = new BrowserWindow();
    win.loadURL(`file://${__dirname}/index.html`);
 });

 ipc.on("send-window-id", (event) => {
    event.sender.send("window-id-sent", win.id);
 });


// renderer process

<html>
   <head></head>
   <body>
      <button>new window</button>
      <script>
         const { remote: { BrowserWindow }, ipcRenderer: ipc } = require("electron");

         var button = document.querySelector("button");
         button.addEventListener("click", event => {
           let win = new BrowserWindow();
           win.loadURL(`file://${__dirname}/page2.html`);
           ipc.send("send-window-id");
        });
        ipc.on("window-id-sent", (event,id) => {
           BrowserWindow.fromId(id).close();
        });
     </script>
   </body>
</html>

BrowserWindow.fromId 接收窗口的 id 并返回该 id 的窗口对象

【讨论】：