electron如何让你窗口总是显示在最前面【mac解决全屏窗口alwaysOnTop参数不起作用】

你创建了一个使用Electron框架的应用程序,并希望它在以下情况下始终保持可见:

  • 在切换工作区(桌面)时可见
  • 在其他应用程序之上显示
  • 当其他应用程序全屏显示时,它也显示在顶部
  • 当Keynote处于演示模式时,它也能显示在顶部
    特别是当Keynote处于演示模式时,要实现这一点比较困难。这是最终的解决方案。

你在main.js中添加了设置,这是在package.json中定义的main部分。

javascript 复制代码
const { app, BrowserWindow } = require("electron");
const is_mac = process.platform==='darwin'
if(is_mac) {
  app.dock.hide()                                     // - 1 - 
}
const MAIN_WINDOWS_WIDTH = 300;
const MAIN_WINDOWS_HEIGHT = 350;
function createClapWindow() {
  // 创建浏览器窗口。
  const mainWindow = new BrowserWindow({
    width: MAIN_WINDOWS_WIDTH,
    height: MAIN_WINDOWS_HEIGHT,
    webPreferences: {
      preload: path.join(__dirname, 'preload.js'),
    }
  })
  mainWindow.setAlwaysOnTop(true, "screen-saver")     // - 2 -
  mainWindow.setVisibleOnAllWorkspaces(true)          // - 3 -
  mainWindow.loadFile('public/reaction.html')
}
app.whenReady().then(() => {
  createClapWindow()
})
  1. app.dock.hide()

    这个设置允许macOS在全屏模式下显示在顶部。由于Windows操作系统没有这个设置,所以在设置之前要检查是否是macOS。这个设置只适用于macOS。

  2. mainWindow.setAlwaysOnTop(true, "screen-saver")

    这个设置允许在Keynote演示模式下显示在顶部。BrowserWindow中有一项alwaysOnTop。当我设置为true时,其他应用程序会被覆盖在顶部,但Keynote演示模式下不行。所以我需要设置mainWindow.setAlwaysOnTop(true, "screen-saver")

  3. mainWindow.setVisibleOnAllWorkspaces(true)

    这个设置允许在切换到其他工作区时显示。

代码:

复制代码
function alwaysOnTop(app, win) {
	const is_mac = process.platform==='darwin'
	if(is_mac) {
	  app.dock.hide()                                     // - 1 - 
	}
	win.setAlwaysOnTop(true, "screen-saver")     // - 2 -
	win.setVisibleOnAllWorkspaces(true)   
}
相关推荐
摇滚侠38 分钟前
Vue 项目实战《尚医通》,预约挂号就诊人组件搭建上,笔记40
前端·javascript·vue.js·笔记
ai_xiaogui5 小时前
Mac苹果版Krita AI一键安装教程:AIStarter+ComfyUI零基础部署全流程(X86/ARM双架构)
arm开发·人工智能·macos·comfyui·一键部署·ai绘画教程·kritaai
chilavert3186 小时前
技术演进中的开发沉思-191 JavaScript: 发展历程(上篇)
开发语言·javascript·ecmascript
dy17177 小时前
el-table表头上下显示内容
javascript·vue.js·elementui
亮子AI7 小时前
给你的应用加上Google账号登录
javascript
努力往上爬de蜗牛8 小时前
react native 实现选择图片或者拍照上传(多张)
javascript·react native·react.js
谢尔登8 小时前
【React】React组件的渲染过程分为哪几个阶段?
前端·javascript·react.js
无敌最俊朗@8 小时前
Vue 3 概况
前端·javascript·vue.js
拉不动的猪9 小时前
一文搞懂:localhost和局域网 IP 的核心区别与使用场景
前端·javascript·面试
未来之窗软件服务10 小时前
自建开发工具IDE(二)文件托拽读取——东方仙盟炼气期
开发语言·前端·javascript·仙盟创梦ide·东方仙盟