Откройте новое окно и закройте другое

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, вместо этого мы его скрываем.

Надеюсь, это поможет.