electron 电子版1.7：关闭、最大化和最大化

9cbw7uwe 于 2023-02-06 发布在 Electron

关注(0)|答案(2)|浏览(232)

我试图建立一个简单的应用程序有关闭，最大化和最小化按钮。
应用程序的问题是关闭、最大化和最小化无法正常工作。当单击按钮时，console.log()功能正常，并显示正确的消息，但是，它没有执行实际的关闭、最大化和最小化操作。
此外，在CSS中，我为标题添加了-webkit-app-region: drag;，但为选项（即按钮）添加了-webkit-app-region: no-drag;。
附上截图。

驱动程序index.js的内容为：

const {app, BrowserWindow} = require('electron');
const url = require('url');

let win = null;

function boot() {
    win = new BrowserWindow({
        width: 640,
        height: 480,
        frame: false
    });
    win.loadURL(`file://${__dirname}/index.html`);
    win.on('closed', () => {
        win = null;
    });
}

app.on('ready', boot);

header {
    display: flex;
    flex-direction: row-reverse;
    justify-content: flex-start;
    background: #353535;
    color: black;
    align-self: stretch;
    -webkit-app-region: drag;
}

#content {
    display: flex;
    height: 100vh;
    flex-direction: column;
    background: black;
    align-items: center;
}

.option {
    color: white;
    padding: 10px 25px;
    font-size: 16px;
    cursor: pointer;
    -webkit-app-region: no-drag;
    
}

.option:hover {
    background: red;
}

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
        <title>Sample App</title>
        <link rel="stylesheet" href="css/style.css">
    </head>
    <body>
        <div id="content">
            <header>
                <div class="option" id="close">X</div>
                <div class="option" id="minimize">-</div>
                <div class="option" id="maximize">=</div>         
            </header>               
        </div>
        
        <script src="js/script.js"></script>
    </body>
</html>

此外，script.js的内容为

const {remote} = require('electron');

document.getElementById('close').addEventListener('click', closeWindow);
document.getElementById('minimize').addEventListener('click', minimizeWindow);
document.getElementById('maximize').addEventListener('click', maximizeWindow);


function closeWindow () {        
    var window = remote.getCurrentWindow();
    window.close();
}

function minimizeWindow () {   
    var window = remote.getCurrentWindow();
    window.minimize();
}

function maximizeWindow () {
    var window = remote.getCurrentWindow()
    window.isMaximized() ? window.unmaximize() : window.maximize();
}

electron

来源：https://stackoverflow.com/questions/46866735/electron-v1-7-close-maximize-and-maximize

2条答案

按热度按时间

wsewodh21#

这可以通过使用getFocusedWindow而不是getCurrentWindow来修复。
在script.js文件中，将函数closeWindow()、minimizeWindow()和maximizeWindow()更新为：

const {remote} = require('electron');

document.getElementById('close').addEventListener('click', closeWindow);
document.getElementById('minimize').addEventListener('click', minimizeWindow);
document.getElementById('maximize').addEventListener('click', maximizeWindow);

/*
  getFocusedWindow() may return null.
  If a user uses global keyboard shortcut to trigger 
  minimizeWindow, there may not be any window that 
  is focused right now
*/ 
const getWindow = () => remote.BrowserWindow.getFocusedWindow();

function closeWindow () {
    getWindow().close();
}

function minimizeWindow () {  
    getWindow().minimize();
}

function maximizeWindow () {
    const window = getWindow();
    window.isMaximized() ? window.unmaximize() : window.maximize();
}

getFocusedWindow()代替getCurrentWindow()工作的原因可以由有经验的开发人员来解释。

赞(0）回复(0）举报 2023-02-06

uajslkp62#

如果这对你不起作用：

window.isMaximized() ? window.unmaximize() : window.maximize();

试试这个：

function maximizeWindow () {
    var window = remote.BrowserWindow.getFocusedWindow();
    window.setFullScreen(!window.isFullScreen());
  }

赞(0）回复(0）举报 2023-02-06

我来回答

electron 电子版1.7：关闭、最大化和最大化

2条答案

相关问题

热门标签

最新问答