Electron透明顶层窗口实现下层界面可点击的技术问询

阿华AIGC实验室

2026-5-26

实现透明带边框窗口且下层可点击的方案

嘿，刚好对Electron的窗口交互机制熟得很，来给你捋清楚怎么解决这个问题：

核心结论：完全可以实现，没必要用“缩小窗口+扩展边框”的取巧方案

Electron本身就提供了鼠标事件透传的API，能直接让透明窗口的非交互区域（也就是你要显示背景内容的部分）把点击事件传给下层界面，同时还能保留边框的可交互性（比如拖拽调整窗口、点击关闭按钮这些操作）。

具体实现步骤

1. 调整窗口创建配置

首先，你的透明窗口需要开启transparent: true，如果想要保留系统原生边框，只需要让窗口的内容透明区域透传鼠标事件就行；如果是自定义样式的边框，也可以通过渲染层的CSS灵活控制交互区域。

先把你的窗口创建代码补全并优化：

const { app, BrowserWindow, screen } = require('electron');

let overlayWindow;

function createOverlayWindow() {
  const { width, height } = screen.getPrimaryDisplay().size;
  
  overlayWindow = new BrowserWindow({
    width,
    height,
    transparent: true,
    frame: true, // 保留系统原生边框
    alwaysOnTop: true, // 确保窗口始终在最上层
    webPreferences: {
      contextIsolation: true, // 符合Electron新版本安全规范
      preload: './preload.js' // 如需渲染层和主进程通信，可通过预加载脚本
    }
  });

  // 加载你的窗口页面（可以是空页面，或仅包含自定义边框的HTML）
  overlayWindow.loadFile('overlay.html');

  // 关键：让内容区域的鼠标事件透传给下层界面
  overlayWindow.webContents.setIgnoreMouseEvents(true, { forward: true });
}

app.whenReady().then(createOverlayWindow);

2. 自定义边框的交互控制（可选）

如果你不想用系统原生边框，想自己画带样式的边框，可以在overlay.html里通过CSS精准控制哪些区域能接收鼠标事件：

<!DOCTYPE html>
<html>
<head>
  <style>
    body {
      margin: 0;
      width: 100vw;
      height: 100vh;
      pointer-events: none; /* 全局设置不接收鼠标事件，让下层透传 */
    }
    .custom-border {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      border: 4px solid #FF5722;
      pointer-events: auto; /* 边框区域恢复鼠标交互，支持拖拽调整 */
    }
    /* 如果需要添加自定义关闭按钮，也给它设置pointer-events: auto */
    .close-btn {
      position: absolute;
      top: 10px;
      right: 10px;
      padding: 5px 10px;
      background: #333;
      color: white;
      cursor: pointer;
      pointer-events: auto;
    }
  </style>
</head>
<body>
  <div class="custom-border">
    <div class="close-btn">关闭</div>
  </div>
</body>
</html>