Question

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

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

选择期间的切换/案例说明：

$('.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，并希望通过创建一个可以完成此功能的单个函数来缩短代码。

您的亲密伙伴

您实际上在click事件中不需要条件语句，但是如果您选择的话，可以，我注意到您使用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关闭{{1} }，但在关闭事件期间，我们阻止它退出BrowserWindow，而是将其隐藏。

希望有帮助。

打开一个新窗口，然后关闭另一个窗口

1 个答案: