当我点击一个按钮时,我可以打开一个新窗口,但是,它是一个新的弹出窗口。如何打开新窗口代替主窗口?
var app = require('app')
var BrowserWindow = require('browser-window')
var ipc = require('ipc')
app.on('ready', function () {
var mainWindow = new BrowserWindow ({
width: 800,
height: 600
})
mainWindow.loadURL('file://' + __dirname + '/main.html')
//mainWindow.openDevTools() //opens inspect console
var prefsWindow = new BrowserWindow ({
width: 400,
height: 400,
show: false
})
prefsWindow.loadURL('file://' + __dirname + '/prefs.html')
使用上面的代码,会弹出一个新窗口。我附上了截图,以显示我的意思。
而不是那个弹出窗口,我希望'prefs'替换主窗口(以及其他选项,以便在添加后替换主窗口)。
答案 0 :(得分:8)
只需将prefs.html加载到mainWindow中,而不是创建新窗口。您的旧内容(main.html)将在不打开其他窗口的情况下被替换。
当相应按钮放在main.html内时,您需要通过ipc远程模块应用此加载。
关于电子0.35.0及以上版本的this SO answer:
// In main process.
const ipcMain = require('electron').ipcMain;
// in main process, outside of app.on:
ipc.on('load-page', (event, arg) => {
mainWindow.loadURL(arg);
});
// In renderer process (web page).
const ipc = require('electron').ipcRenderer;
然后可以按如下方式执行加载新页面:
ipc.send('load-page', 'file://' + __dirname + '/prefs.html');
答案 1 :(得分:2)
如果有人感兴趣,这就是我所做的。
假设我有login form
,并且登录后想要显示要进行操作的主窗口。
设置您的index.js
const electron = require('electron');
const url = require('url');
const path = require('path');
const { app, BrowserWindow } = electron;
let loginWindow;
var mainIndex = '../../index.html'; //the login window
var directoryHtml = '../html/'; //directory of where my html file is, the main window is here except the login window
var iconPath = '../../images/logo.png'; //replace with your own logo
let { ipcMain } = electron;
var newWindow = null;
app.on('ready', function () {
loginWindow = new BrowserWindow({//1. create new Window
height: 600, width: 450,
minHeight: 600, minWidth: 450, //set the minimum height and width
icon: __dirname + iconPath,
frame: false, //I had my own style of title bar, so I don't want to show the default
backgroundColor: '#68b7ad', //I had to set back color to window in case the white screen show up
show: false //to prevent the white screen when loading the window, lets not show it first
});
loginWindow.loadURL(url.format({ //2. Load HTML into Window
pathname: path.join(__dirname, mainIndex),
protocol: 'file',
slashes: true
}));
loginWindow.once('ready-to-show', () => {
loginWindow.show() //to prevent the white screen when loading the window, lets show it when it is ready
})
});
//dynamically resize window when this function is called
ipcMain.on('resize', function (e, x, y) {
loginWindow.setSize(x, y);
});
/** start of showing new window and close the login window **/
ipcMain.on('newWindow', function (e, filenName) {
if(newWindow){
newWindow.focus(); //focus to new window
return;
}
newWindow = new BrowserWindow({//1. create new Window
height: 600, width: 800,
minHeight: 600, minWidth: 800,
icon: __dirname + iconPath,
frame: false,
backgroundColor: '#68b7ad',
show: false
});
newWindow.loadURL(url.format({ //2. Load HTML into new Window
pathname: path.join(__dirname, directoryHtml + filenName),
protocol: 'file',
slashes: true
}));
newWindow.once('ready-to-show', () => { //when the new window is ready, show it up
newWindow.show()
})
newWindow.on('closed', function() { //set new window to null when we're done
newWindow = null
})
loginWindow.close(); //close the login window(the first window)
});
/** end of showing new window and closing the old one **/
app.on('closed', function () {
loginWindow = null;
});
// Quit when all windows are closed.
app.on('window-all-closed', function () {
// On OS X it is common for applications and their menu bar
// to stay active until the user quits explicitly with Cmd + Q
if (process.platform !== 'darwin') {
app.quit()
}
})
app.on('activate', function () {
// On OS X it's common to re-create a window in the app when the
// dock icon is clicked and there are no other windows open.
if (loginWindow === null) {
createWindow()
}
})
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Login Window</title>
</head>
<body>
<h1>Login</h1>
<!-- . . . . -->
<button id="btn-login" onclick="loginNow()"></button>
<!-- . . . . -->
<script>
function loginNow(){
//.....
//assuming the authentication is valid, we want to show now the new window which will be our main window
const { ipcRenderer } = require('electron'); //require electron
//using ipcRenderer, let's call the function in index.js where the function name is `newWindow`,
//the `main.html` is the new html file I want to show, use your own.
ipcRenderer.send('newWindow','main.html');
}
</script>
</body>
</html>
我不知道这是否是正确的方法,我也不知道这样做的缺点,但我希望没有。希望这对某人有帮助。
答案 2 :(得分:1)
您有几个选择。
您只需拨打prefsWindow.focus()
即可确保第二个窗口位于第一个窗口之上。
您可以使用mainWindow.hide()
或mainWindow.destroy()
隐藏或关闭主窗口,只打开第二个窗口。然后在完成后重新打开它。
或者不是有两个窗口,你可以将你的prefs页面加载到第一个窗口,然后再回到主页面。
答案 3 :(得分:0)
在创建一个在访问实际内容之前首先需要身份验证的应用程序时,我遇到了类似的问题。因此,该应用程序的首页是登录表单。登录成功后,应该加载一个新页面,而不是实际的内容。为此,我已执行以下操作:
在main.js或index.js中如何命名,而不是在开始时加载第二个窗口然后显示它,而是在IPC事件侦听器中加载它。因此,当IPC侦听器收到某个事件时,它将加载页面。
const {ipcMain} = require('electron');
ipcMain.on('login', (event, arg) => {
loginPage.loadURL(url.format({
pathname: path.join(__dirname, 'mainpage.html'),
protocol: 'file',
slashes: true
}));
});
请注意,loginPage是我在app.on()上创建的主窗口,而mainpage是成功登录后创建的第二个页面。
然后在我验证登录名之后,在我的loginPage.html中,如果成功,则将该IPC渲染器消息发送回主进程。这样做很简单:
var ipc = require('electron').ipcRenderer;
ipc.send('login', 'an-argument');
上面的方法应该起作用。我只是一个初学者,所以我不能说这是否是最好的方法,或者它有没有立即被发现的不需要的含义,但是它已经为我解决了,所以您不妨尝试一下。
答案 4 :(得分:0)
在找到一个简单的解决方案之前,我一直在与您解决相同的问题。 这是JS代码:
this.mediaPlayer.onFinishInflate();