我使用frame: false
使标题栏消失,然后我试图使按钮的功能从others respond,但它不工作
index.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>my app</title>
<link rel="stylesheet" href="index.css" />
</head>
<body>
<div class="title-container">
<img src="res/applogo.png" style="width: 22px; height: 22px;">
<div style="width: 5px; height: 22px;"></div>
<p class="title-text">my app - some page</p>
<a href="#" style="text-decoration: none;"><p class="title-button" id="min-btn">-</p></a>
<a href="#" style="text-decoration: none;"><p class="title-button" id="max-btn">◻</p></a>
<a href="#" style="text-decoration: none;"><p class="title-button" id="close-btn">×</p></a>
</div>
<div class="application-container">
...
</div>
<script>
document.querySelector('button[data-title="Developer Tool"]').addEventListener('click', () => {
window.open('devTool.html', "_blank", "width=1200,height=714,resizable=false,,autoHideMenuBar=true"); // local file
})
const remote = require('electron').remote;
document.getElementById("min-btn").addEventListener("click", function (e) {
var window = remote.getCurrentWindow();
window.minimize();
});
document.getElementById("max-btn").addEventListener("click", function (e) {
var window = remote.getCurrentWindow();
if (!window.isMaximized()) {
window.maximize();
} else {
window.unmaximize();
}
});
document.getElementById("close-btn").addEventListener("click", function (e) {
var window = remote.getCurrentWindow();
window.close();
});
</script>
<script src="index.js"></script>
</body>
</html>
index.js是一个空白文件
我怎样才能使按钮工作?请详细答复,如果你可以,因为我仍然是相当新的JavaScript,谢谢你。如果有什么不清楚,请告诉我下面,我会尽量提供它。
1条答案
按热度按时间kgsdhlau1#
与其他SO Question类似,您需要熟悉以下Electron Browser Window - Instance Methods以获取更多信息。
win.minimize()
win.maximize()
win.restore()
win.close()
在创建窗口时,我们告诉窗口它所处的状态。例如:最大化或恢复。这个“状态”通过IPC(通过我们的
preload.js
脚本)发送到渲染端Javascript,以显示或隐藏正确的最大化/恢复按钮。在此之后,我们只需要监听渲染端标题栏按钮的点击。点击后,通过IPC向主进程发送一条消息来控制窗口的状态。根据请求(“maximize”或“restore”),通过IPC向渲染进程发送一条消息,以“show”或“hide”(通过CSS display属性)正确的maximize/ restore按钮。
在这里,我们将窗口框架状态设置为
false
,加载index.html
文件,告诉渲染进程(通过IPC)窗口的状态(在本例中恢复),然后最终显示窗口。main.js
(主进程)设置用于管理窗口状态的通道名称。
preload.js
(主进程)这个
preload.js
脚本的用法如下。最后,让我们监听并发送消息到主进程(通过我们的
preload.js
脚本)来管理窗口状态。index.html
(渲染进程)