深入浅出解决Electron窗口置顶失效的问题

大小小丹

已于 2023-03-29 21:55:00 修改

阅读量5.1k

点赞数 2

分类专栏： Electron 文章标签： Electron javascript window

于 2021-03-24 15:29:10 首次发布

本文链接：https://blog.youkuaiyun.com/baidu_30907803/article/details/115178118

版权

Electron 专栏收录该内容

13 篇文章 ¥29.90 ¥99.00

订阅专栏

超级会员免费看

本文探讨了在Electron应用中实现窗口始终置顶遇到的问题，包括使用`alwaysOnTop: true`不理想的情况。通过深入研究Electron文档，作者找到了一种有效的方法，确保窗口在其他应用之上保持可见，同时实现窗口拖动移动的功能，以达到类似360浮窗的效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

最近接到一个任务做窗口浮窗置顶，并且可以拖动移动，类似360的浮窗，如下图所示：

第一时间是使用 alwaysOnTop: true, 但实际效果不如意，比如打开其他应用时会隐藏置顶，效果达不到。经过一番折腾，查阅Electron文档，官网地址，配置如下：

// 即时会议窗口
function createInstantWindow (title, message, btns) {
  //如果已经存在即时会议窗口 就不再弹窗了
  let instantWindow = utils.winUtils.get('instant');
  if (instantWindow) return false;
  const instantWindowConfig = {
    width: 200,
    height: 200,
    type: 'toolbar', // 创建窗口类型为工具栏窗口
    frame: false, //是否显