如何在没有远程模块的情况下最大化和最小化电子窗口

Posted 2023-03-22

【中文标题】如何在没有远程模块的情况下最大化和最小化电子窗口

【英文标题】：How to maximize and minimize window in electron without the remote module

【发布时间】：2021-11-20 04:05:55

【问题描述】：

我正在尝试创建一个 electron 应用程序，但我无法理解如何使用远程模块 require('@electron/remote/');

我可以通过window.close();关闭窗口

但我不明白如何最小化和最大化窗口。

我想使用 jquery 来最大化、恢复、最小化和取消最大化

所以如果有解决方案请回答我，并尝试给我一个简单的ipc解释。

提前致谢。。

【问题讨论】：

也许值得看看 Electron 的 IPC？我相信他们的文档中有这个确切的用例作为示例，但我不确定。

我试过学习ipc，但如果有更好的解决方案请提供给我。

这能回答你的问题吗？ How to get the current browser window in the renderer in Electron 14

请查看here 并让我们知道使用getFocusedWindow() 定位窗口是否可以更好地工作。

Electron v14 不支持远程。所以我需要一个更好的方法。

【参考方案1】：

我今天也遇到了同样的问题，我设法找到了解决方案。 Electron 团队不希望你使用远程，因为这很糟糕。

请仔细阅读所有内容！

最好的解决方案是使用ipc。别担心。当你这样做时，它并没有那么复杂。

注意：查找 //------------------------ 以获取代码粘贴位置

这可能是你的主进程的样子（主进程是创建窗口的地方）只是一个解释，这里没有复制粘贴。

const  app, BrowserWindow, electron  = require('electron');
const path = require('path');

const createWindow = () => 
        // Create the browser window.
        const mainWindow = new BrowserWindow(
        minWidth: 1000,
        minHeight: 480,
        frame: false,
        webPreferences: 
        nodeIntegration: true, 
        contextIsolation: false,
        ,
    );

    // and load the index.html of the app.
    mainWindow.loadFile(path.join(__dirname, 'index.html'));

    // Open the DevTools.
    mainWindow.webContents.openDevTools();
;

app.on('ready', createWindow);

所以第一步将东西放入你的渲染器进程（附加到 html 文档的脚本）

//--------------------------------------------
const electron = require("electron");
const ipc = electron.ipcRenderer;

const togmax = document.getElementById("togmax");

togmax.addEventListener("click", function() 
    ipc.send("toggle-maximize-window");
);
//--------------------------------------------

接下来，将其放入您的const create window = () => ...

//--------------------------------------------
const ipc = require("electron").ipcMain;
//--------------------------------------------

//--------------------------------------------
ipc.on("toggle-maximize-window", function(event) 
    if(mainWindow.isMaximized()) 
        mainWindow.unmaximize();
     else 
        mainWindow.maximize();
    
);
//--------------------------------------------

这就是你的主脚本之后的样子。

const  app, BrowserWindow, electron  = require('electron');
const path = require('path');
//---------------------------------------------
const ipc = require("electron").ipcMain;
//---------------------------------------------

const createWindow = () => 
    // Create the browser window.
    const mainWindow = new BrowserWindow(
        minWidth: 1000,
        minHeight: 480,
        frame: false,
        webPreferences: 
            nodeIntegration: true, 
            contextIsolation: false,
        ,
    );

    // and load the index.html of the app.
    mainWindow.loadFile(path.join(__dirname, 'index.html'));

    // Open the DevTools.
    mainWindow.webContents.openDevTools();


 //----------------------------------------------------------------
    ipc.on("toggle-maximize-window", function(event) 
        if(mainWindow.isMaximized()) 
            mainWindow.unmaximize();
         else 
            mainWindow.maximize();
        
    );
//-----------------------------------------------------------------
;

总而言之，您输入了nodeIntergration: true，因此您可以在HTML 的脚本中使用“require”。您正在使用带有 ipcRenderer 的脚本向主进程 (ipcMain) 和 ipc.on(...) 发送消息 意味着当它收到一条消息时，它会执行括号之间的任何操作。我们将代码粘贴到创建主窗口的位置inside 的原因是因为我们想要远程模块具有的功能。 通过那里的那段代码，您可以执行mainWindow.maximize()、mainWindow.minimize() 之类的操作，检查其是否已最大化，以及远程允许您执行的所有操作。如果您想要更多，请查看此链接。 https://www.electronjs.org/docs/latest/api/browser-window/#event-maximize它向您展示了您可以做的所有事情。

然后你就完成了。只有 3 件东西要粘贴，所以你很好。 确保在此之后查看 Electron 文档。我很好，所以我用勺子喂你代码，但一定要在你遇到障碍后了解更多！

【讨论】：

谢谢（但我之前看过你的回答，我没有回复?）所以我当时比node更了解php。但现在我不是在开发一个应用程序，而是一个网站。嗯，主要的事情 - 非常非常感谢！

看来你花了很长时间才写完这一切！感谢您的努力和时间！