电子v1.7：关闭，最大化和最大化 [英] Electron v1.7: Close, Maximize and Maximize
问题描述
我正在尝试构建具有关闭，最大化和最小化按钮的简单应用程序。
I am trying to build a Simple App having Close, Maximize and Minimize buttons.
该应用程序的问题是关闭，最大化和最小化不起作用正确地。单击按钮时， console.log（）可以正常工作并显示正确的消息，但是，它没有执行实际的Close，Maximize和Minimize操作。
The problem with the application is that the Close, Maximize and Minimize are not working properly. The console.log() when the buttons are clicked, is functioning properly and displaying the proper messages, however, it is not performing the actual Close, Maximize and Minimize operations.
此外，不是在CSS中，我添加了 -webkit-app-region：drag; 作为标头，但添加了 -webkit-app-region：无拖动； 表示选项，即按钮。
Also, not that in the CSS, I have added -webkit-app-region: drag; for the header but added -webkit-app-region: no-drag; for options, i.e., buttons.
附加
驱动程序索引的内容.js是：
The content of driver index.js is:
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的内容为
Also, the contents of script.js is
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.minmize();
}
function maximizeWindow () {
var window = remote.getCurrentWindow()
window.isMaximized() ? window.unmaximize() : window.maximize();
}
推荐答案
可以使用 getFocusedWindow 而不是 getCurrentWindow 。
在您的script.js文件中，更新函数 closeWindow（）， minimizeWindow（）和 maximizeWindow（），如：
In your script.js file, update the the functions, closeWindow(), minimizeWindow() and maximizeWindow(), as:
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.BrowserWindow.getFocusedWindow();
window.close();
}
function minimizeWindow () {
var window = remote.BrowserWindow.getFocusedWindow();
window.minimize();
}
function maximizeWindow () {
var window = remote.BrowserWindow.getFocusedWindow();
window.isMaximized() ? window.unmaximize() : window.maximize();
}
getFocusedWindow（）可以代替 getCurrentWindow（）起作用，可以由经验丰富的开发人员解释。
The reason why getFocusedWindow() works instead of getCurrentWindow() can be explained by an experienced developer.
这篇关于电子v1.7：关闭，最大化和最大化的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
