在电子应用程序中单击按钮时如何打开新窗口并关闭当前窗口？答案

【问题标题】：How to open a new window and close the current when clicked on button in electron application?在电子应用程序中单击按钮时如何打开新窗口并关闭当前窗口？
【发布时间】：2019-10-07 06:28:52
【问题描述】：

当用户单击启动电子应用程序时显示的第一个窗口中的按钮时，我想打开一个新窗口。假设我想在用户单击当前加载 mainWindow.html 的应用程序上显示的按钮时显示一个名为“second.html”的新 html 文件。

index.js 文件

const url = require('url');
const path = require('path');


const { app, BrowserWindow, Menu } = electron;

let mainWindow;
let { ipcMain } = electron;
let runAnalysisWindow

//Listen for an app to be ready.
app.on('ready', function() {
    //Create a new Window.
    mainWindow = new BrowserWindow({});
    //Load html into Window.
    mainWindow.loadURL(url.format({
        pathname: path.join(__dirname, 'mainWindow.html'),
        protocol: 'file:',
        slashes: true
    }));
    //Build menu from template.
    const mainMenu = Menu.buildFromTemplate(mainMenuTemplate);
    //Insert the menu.
    Menu.setApplicationMenu(mainMenu);

});


app.on('closed', function() {
    mainWindow = 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 (mainWindow === null) {
        createWindow()
    }
})



//Create menu template.

const mainMenuTemplate = [{
    label: 'File',
    submenu: [{
            label: 'Run Analysis'
        },
        {
            label: 'Stop Analysis'
        },
        {
            label: 'Generate Report'

        },
        {
            label: 'Previous Reports'
        },
        {
            label: 'Help'
        },
        {
            label: 'Quit',
            accelerator: process.platform == 'darwin' ? 'Command+Q' : 'Ctrl+Q', //Use the shortcut to quit the app in windows and mac.
            click() {
                app.quit();
            }
        }
    ]

}];

HTML 文件（mainWindow.html）：

<!DOCTYPE html>
<html lang="en">
<head>
    <title>SparrowAI</title>
    <style>
    .button {
    background-color: #4CAF50; /* Green */
    border: none;
    color: white;
    padding: 16px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 4px 2px;
    -webkit-transition-duration: 0.4s; /* Safari */
    transition-duration: 0.4s;
    cursor: pointer;
    }

    .button1 {
    background-color: Transparent; 
    color: white; 
    border: 2px solid #ffffff;
    }
    .button1:hover {
    background-color: #555555;
    color: white;
    }
    </style>
</head>
<body background = "log_page.jpg">

<button type="button" class="button button1"> Login</button>



</body>
</html>

【问题讨论】：

搜索Electron - Inter Process Communication (IPC)

标签： html window electron new-window

【解决方案1】：

您可以使用 ipcRenderer 发送 ipc 消息以打开新的 html，

ipcRenderer.send('button-click');

像这样在主进程中捕获点击

ipcMain.on('button-click',()=>{
    //Load html into Window.
    mainWindow.loadURL(url.format({
        pathname: path.join(__dirname, 'second.html'),
        protocol: 'file:',
        slashes: true
    }));
})

【讨论】：