Electron 如何让窗口显示在全屏窗口上（Mac/Windows）

2024-06-26 16:43| 来源: 网络整理| 查看: 265

在 Electron 开发中，有时我们希望让一个小窗口浮动在其他全屏应用之上，例如输入法、提示窗口或其他辅助功能。下面是一种实现此功能的方法：

jsconst { app, BrowserWindow } = require("electron"); const path = require("path"); // 判断是否为 macOS const is_mac = process.platform === "darwin"; // 如果是 macOS，则隐藏 dock 图标 if (is_mac) { app.dock.hide(); // - 1 - } // 创建浏览器窗口 mainWindow = new BrowserWindow({ width: 300, // 窗口宽度 height: 100, // 窗口高度 frame: false, // 无边框 show: false, // 初始不显示 alwaysOnTop: true, icon: path.join(__dirname, "../../icons/png/1024x1024.png"), webPreferences: { preload: path.join(__dirname, "preload.js"), }, }); // 设置窗口始终在最前面 mainWindow.setAlwaysOnTop(true, "screen-saver"); // - 2 - // 设置窗口在所有工作区都可见 mainWindow.setVisibleOnAllWorkspaces(true); // - 3 - // 加载应用的 index.html mainWindow.loadFile(path.join(__dirname, "../../public/index.html")); // 当窗口失去焦点时，隐藏它 mainWindow.on("blur", () => { mainWindow.hide(); });解释：隐藏 Dock 图标：在 macOS 上，通过隐藏 dock 图标，应用被视为“后台”应用，使其窗口更容易浮动在其他全屏应用之上。设置窗口始终在最前面：确保窗口始终在其他窗口之上，即使在全屏模式下。在所有工作区都可见：这确保窗口可以在所有 macOS 桌面空间上可见。

参考地址：如何让 Electron 应用在全屏模式或其他桌面上保持顶部

【本文地址】

公司简介

联系我们

Electron 如何让窗口显示在全屏窗口上 （Mac/Windows）

Electron 如何让窗口显示在全屏窗口上（Mac/Windows）