在电子应用程序中单击按钮时,如何打开新窗口并关闭电流?

时间:2019-05-20 21:38:11

标签: html window electron new-window

当用户单击开始应用电子时显示的第一个窗口中的按钮时,我想打开一个新窗口。 假设我想在有人单击当前加载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>

1 个答案:

答案 0 :(得分:0)

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

<div>

在这样的主要过程中获得点击

ipcRenderer.send('button-click');