javascript - 打开一个新窗口并关闭另一个窗口

Question

我正在使用 IPCMain 和 IPCRenderer 通过打开新窗口并关闭旧窗口来切换到 3 个不同的窗口，我错过了一些东西，并且很难弄清楚。

基本上，用户会选择并单击第 3 个类别，相应的窗口将出现，当前窗口将关闭。

选择期间的 switch/case 语句:

$('.category a').on('click',function(){
    var cat = $(this).attr('href');
    const {
        ipcRenderer
    } = require('electron');

    switch (cat){
        case 'Window_1':
            ipcRenderer.send('newWindow', 'Window_1');
        break;
        case 'Window_2':
            ipcRenderer.send('newWindow', 'Window_2');
            break;
        case 'Window_3':
            ipcRenderer.send('newWindow', 'Window_3');
            break;
        default:
        break;
    }
});

这是显示窗口的代码

//some code for declaration of library and variables
//....
let {
    ipcMain
} = electron;

var correspondingWindow = null;
let mainWindow;

app.on('ready', function () {
    //Some code for Initialization of Main Window...
});

//function that will be call to show a new window and close the other one
ipcMain.on('newWindow', function (e, category) {

    var height;
    var width; 
    var address;

    //1: focus on the new window
    if (correspondingWindow) {
        correspondingWindow.focus();
        return;
    }

    //2: initialize the height, width and the file address of new Window
    switch (category){
        case 'Window_1':
            height = 600;
            width = 800;
            address = '../html/window_1.html';
        break;
        case 'Window_2':
            height = 600;
            width = 400;
            address = '../html/window_2.html';
            break;
        case 'Window_3':
            height = 600;
            width = 600;
            address = '../html/window_3.html';
            break;
        default:
        break;
    }

    //3: Initialization of new Window
    correspondingWindow = new BrowserWindow({ 
        height: height,
        width: width,
        minHeight: height,
        minWidth: width,
        icon: __dirname + iconPath,
        frame: false,
        backgroundColor: '#FFF',
        show: false
    });

    //4: Load HTML into Window
    correspondingWindow.loadURL(url.format({ 
        pathname: path.join(__dirname, directoryHtml + address),
        protocol: 'file',
        slashes: true
    }));

    //5: Initialization closing event of Window
    correspondingWindow.on('closed', function () {
        correspondingWindow = null;
    });

    //6: finally, show it once its ready
    correspondingWindow.once('ready-to-show', () => {
        correspondingWindow.show();
    });

    //7: Close the Main Window if possible, so that only one window will show at a time.
    if (mainWindow !== null) {
        mainWindow.close();
        mainWindow = null;
    }
});     

我能够显示新窗口并关闭 MainWindow，但不能通过再次调用 ipcMain 函数来第二次关闭。第二次调用时没有任何反应。

我可以通过创建三个不同的 ipcMain 函数来使其工作，但我想找到一种方法使其只有一个函数。

Answer 1

据我了解，您希望基于单击的项目打开一个新的 BrowserWindow 来代替当前的 BrowserWindow，并且您希望通过创建一个可以实现这一目的的函数来缩短代码。

你足够亲密的伙伴。

实际上，您的点击事件中不需要条件语句，但如果您选择，也可以，我注意到您使用 JQuery，因此这将是您单击的元素上的代码:

<script src="../js/renderer.js"></script> 
<script>window.$ = window.jQuery = require('jquery');</script>
<script>
$('.category a').on('click',function(){
    const {
        ipcRenderer
    } = require('electron');
    ipcRenderer.send('createBrowserWindow', $(this).attr('href'));

    const remote = require('electron').remote;
    remote.getCurrentWindow().close();
});
</script>

请注意，我使用了remote 函数。

这是你的main.js

const {
    app,
    BrowserWindow
} = electron;
let {
    ipcMain
} = electron;
let mainWindow;

/*1*/
var toQuit = true; //very important
var category = 'window_1'; //default category

/*2*/
app.on('ready', function () {
    "use strict";
    createWindow(); //call this function to create a BrowserWindow on its lunch
});

app.on('closed', function () {
    "use strict";
    mainWindow = null;
});

app.on('window-all-closed', function () {
    "use strict";
    if (process.platform !== 'darwin') {
        app.quit();
    }
});

/*3*/
function createWindow() {
    "use strict";
    var height;
    var width;
    var address;

    switch (category) {
        case 'window_1': 
            height = 600; //Initialize size of BrowserWindow
            width = 400; //Initialize size of BrowserWindow
            address = '../html/window_1.html'; //Initialize the address or the file location of your HTML
            break;
        case 'window_2':
            height = 600; //Initialize size of BrowserWindow
            width = 400; //Initialize size of BrowserWindow
            address = '../html/window_1.html'; //Initialize the address or the file location of your HTML
            break;
        case 'window_3':
            height = 600; //Initialize size of BrowserWindow
            width = 400; //Initialize size of BrowserWindow
            address = '../html/window_1.html'; //Initialize the address or the file location of your HTML
            break;
        default:
            break;
    }

    mainWindow = new BrowserWindow({ 
        height: height, //height and width of BrowserWindow
        width: width, //height and width of BrowserWindow
        minHeight: height, //minimum height and width of BrowserWindow, you can remove this if you want
        minWidth: width, //minimum height and width of BrowserWindow, you can remove this if you want
        icon: __dirname + iconPath,
        frame: false,
        backgroundColor: '#FFF',
        show: false
    });

    mainWindow.loadURL(url.format({ 
        pathname: path.join(__dirname, address), //file location of html
        protocol: 'file',
        slashes: true
    }));

    mainWindow.once('ready-to-show', () => {
        mainWindow.show(); //we only want to show it when its ready to avoid the FLASH WHITE during lunch of BrowserWindow
        mainWindow.focus(); //We make sure to focus on it after showing
    });

    /**The magic start here, **/
    mainWindow.on('closed', (e) => {
        e.preventDefault(); //We have to prevent the closed event from doing it.
        if(toQuit){ //if the value of toQuit is true, then we want to quit the entire application
            mainWindow = null;
            app.exit(); //quit or exit the entire application
        }else{
            mainWindow.hide(); //just hide the BrowserWindow and don't quit the entire application
            toQuit = true;  //reset the value of toQuit to true
        }
    });
}

//call this function from your any Javascript
ipcMain.on('createBrowserWindow', function (e, cat) {
    "use strict";
    category = cat; //get the category of window on which we want to show
    toQuit = false; //set the value to false, meaning we don't want to close the entire application but just hide the current BrowserWindow
    createWindow(); //call this function over and over again
}); 

事情是如何发生的:

• 我们启动一个 BrowserWindow，其默认类别是 window1。

• 在您的 Javascript 中，我们使用 ipcMain 和 ipcRenderer 来调用 main.js 中的函数，然后使用 remote 来关闭 BrowserWindow 但在关闭事件期间我们阻止它退出 BrowserWindow，而是隐藏它。

希望有帮助。