gpt4 book ai didi

javascript - Electron v1.7 : Close, 最大化和最大化

转载 作者:行者123 更新时间:2023-11-30 09:30:03 30 4
gpt4 key购买 nike

我正在尝试构建一个具有关闭、最大化和最小化按钮的简单应用。

应用程序的问题是关闭、最大化和最小化无法正常工作。单击按钮时 console.log() 正常运行并显示正确的消息,但是,它没有执行实际的关闭、最大化和最小化操作。

此外,不是在 CSS 中,我为标题添加了 -webkit-app-region: drag; 但添加了 -webkit-app-region: no-drag; 用于选项,即按钮。

附上截图。

enter image description here

驱动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();
}

最佳答案

这可以通过使用 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() 的原因可以由有经验的开发人员解释。

关于javascript - Electron v1.7 : Close, 最大化和最大化,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46866735/

30 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com