gpt4 book ai didi

javascript - 开发一个在 Electron 或 JS 中始终位于顶部的粘性组件

转载 作者:行者123 更新时间:2023-11-28 04:15:23 25 4
gpt4 key购买 nike

我现有基于 Electron 的远程桌面控制应用程序,它在 Mac、Windows 上作为桌面应用程序运行,在 Chrome 和 Firefox 上作为 Web 应用程序运行。

现在,我想开发一个粘性组件,无论事件窗口如何,它都将始终位于顶部。例如,即使用户最小化我的应用程序并将其他应用程序放在顶部,该工具栏也始终可见。

有人可以建议我使用可以实现此目的的库或技术(例如 Electron/ReactJS 等)吗?

谢谢,加亚特里

最佳答案

这是我将如何做到这一点的一个简单示例。 (使用 Electron 快速启动创建)

等待 mainWindow 最小化事件并使用 alwaysOnTop: true 创建一个新的 BrowserWindow

文档:https://github.com/electron/electron/blob/master/docs/api/browser-window.md

index.html

<!DOCTYPE html>
<html>

<head>
<meta charset="UTF-8">
<title>Index</title>
</head>

<body>
Index
</body>

</html>

toolbar.html

<!DOCTYPE html>
<html>

<head>
<meta charset="UTF-8">
<title>toolbar</title>
</head>

<body>
toolbar
</body>

</html>

渲染器.js

const electron = require('electron');
const app = electron.app;
const BrowserWindow = electron.BrowserWindow;

const path = require('path');
const url = require('url');

let mainWindow = null;
let toolbarWindow = null;

const createWindow = () => {
// Create the browser window.
mainWindow = new BrowserWindow({
width: 800,
height: 600
});

mainWindow.loadURL(url.format({
pathname: path.join(__dirname, 'index.html'),
protocol: 'file:',
slashes: true
}));

mainWindow.on('closed', () => {
mainWindow = null;
});

const onCloseMainWindow = (event) => {
toolbarWindow = new BrowserWindow({
width: 300,
x: 20,
y: 40,
height: 70,
resize: false,
type: 'toolbar',
alwaysOnTop: true
})

toolbarWindow.loadURL(url.format({
pathname: path.join(__dirname, 'toolbar.html'),
protocol: 'file:',
slashes: true
}));

toolbarWindow.on('minimize', (event) => {
if (mainWindow) {
mainWindow.show();
}
toolbarWindow.destroy();
});
};

mainWindow.on('minimize', onCloseMainWindow);
mainWindow.on('close', onCloseMainWindow);
};

app.on('ready', createWindow);

app.on('window-all-closed', () => {
if (process.platform !== 'darwin') {
app.quit();
}
})

app.on('activate', () => {
if (mainWindow === null) {
createWindow()
}
});

关于javascript - 开发一个在 Electron 或 JS 中始终位于顶部的粘性组件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45914983/

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