[英]how to open new window in place of current window in Electron
當我點擊一個按鈕時,我可以打開一個新窗口,但是,它是一個新的彈出窗口。 如何打開新窗口代替主窗口?
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'替換主窗口(以及其他選項,以替換主窗口一旦添加)。
只需將prefs.html加載到mainWindow中,而不是創建新窗口。 您的舊內容(main.html)將在沒有額外的窗口打開的情況下被替換。
當相應的按鈕放在main.html內時,您需要通過ipc遠程模塊應用此加載。
按照電子0.35.0及以上版本的SO答案 :
// 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');
如果有人感興趣,這就是我所做的。
假設我有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>
如果這是正確的做法,我不知道,我不知道這樣做的缺點,但我希望沒有。 希望這有幫助的人。
你有幾個選擇。
您可以調用prefsWindow.focus()
以確保第二個窗口位於第一個窗口之上。
您可以使用mainWindow.hide()
或mainWindow.destroy()
隱藏或關閉主窗口,只打開第二個窗口。 然后在完成后重新打開它。
或者不是有兩個窗口,您可以將prefs頁面加載到第一個窗口,然后返回到主頁面。
在創建一個在訪問實際內容之前最需要身份驗證的應用程序時,我遇到了類似的問題。 因此,應用程序的第一頁和主頁是登錄表單。 登錄成功后,應該加載一個新頁面而不是實際內容被禁止的位置。 為此,我做了以下事情:
在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');
以上方法應該有效。 我只是一個初學者,所以我不能說這是否是最好的方法,或者它是否有任何不必要的暗示,不會立即看到,但它對我有用,所以你不妨嘗試一下。
在我找到一個簡單的解決方案之前,我正在和你做同樣的問題。 這是JS代碼:
const electron = require('electron');
let rootPath = "src/Page/index.html" //Path to the html file
LoadNewWindowInCurrent(rootPath); //Opens new html file in current window
//Here's the ready function for you to use
function LoadNewWindowInCurrent (PathToHtml){
let localWindow = electron.remote.getCurrentWindow();
localWindow.LoadFile(PathToHtml);
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.