如何使用新的html文件打开更新电子浏览器窗口 [英] How to open update electron browser window with a new html file

问题描述

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

I am new to electron. I have two html pages and I want to open the second page when a button clicked. I have code this as follow, but I just get a blank window; not the second page.

这是index.js

This is 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

This is 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按钮的ID。

login is the id of the html button.

我想获取第二页。我该如何执行呢？

I want to get the page two. How can I perform this?

推荐答案

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

You can easily achieve this by using IPCRenderer and IPCMain in order to pass the messages between the main process and the renderer.

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 并接收来自渲染器的消息。

As you can see, I altered your code only to add ipcMain and receive the message from the renderer.

login.js

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

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

login.js和 ipcRenderer 。

The same goes for login.js and ipcRenderer.

文档比我解释的方法更好，可以在此处和此处ipcRenderer 。

The documentation explains way better than I do and can be found here for ipcMain and here for ipcRenderer.

这篇关于如何使用新的html文件打开更新电子浏览器窗口的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！