跳到主要内容

透明窗口与无边框窗口

使用无边框窗口配合透明背景,可以把 HTML 项目打包成没有系统标题栏、背景可透明的桌面应用,例如桌面挂件、悬浮工具、透明时钟、状态面板等。

透明窗口需要两部分配合:

  1. 在打包工具中启用无边框窗口。
  2. 在 HTML 和 CSS 中设置透明背景,并自行处理拖动区域和窗口按钮。

打包工具配置

在高级配置中勾选无边框窗口。勾选后,生成的 EXE 将没有系统默认标题栏、最小化按钮、最大化按钮和关闭按钮。

无边框窗口设置

如果需要在页面里控制窗口,建议同时勾选开启 API 支持,之后可以在 JavaScript 中调用窗口控制 API。

注意

无边框窗口会移除系统标题栏。请务必在 HTML 页面中提供关闭按钮,否则用户可能不知道如何关闭程序。

设置透明背景

在页面中将 htmlbody 设置为透明背景:

html,
body {
margin: 0;
padding: 0;
background: transparent !important;
}

页面中没有内容覆盖的区域会显示为透明。需要半透明面板时,可以给内部容器设置 rgba 背景。

.panel {
background: rgba(20, 20, 20, 0.8);
border-radius: 12px;
}

设置可拖动区域

无边框窗口没有系统标题栏,默认无法通过标题栏拖动窗口。可以使用 -webkit-app-region 指定拖动区域:

.title-bar {
-webkit-app-region: drag;
}

button,
input,
a,
.no-drag {
-webkit-app-region: no-drag;
}

drag 区域会像系统标题栏一样允许拖动窗口;按钮、输入框、链接等交互元素必须设置为 no-drag,否则点击事件可能无法正常触发。

自定义窗口按钮

开启 API 支持后,可以使用以下 API 实现自定义窗口按钮:

window.HTMLPackHelper.minimize();
window.HTMLPackHelper.maximize();
window.HTMLPackHelper.restore();
window.HTMLPackHelper.close();

简单示例:

<div class="title-bar">
<span>我的工具</span>
<button class="no-drag" onclick="window.HTMLPackHelper.minimize()">最小化</button>
<button class="no-drag" onclick="window.HTMLPackHelper.close()">关闭</button>
</div>

打包建议

  • 透明窗口建议使用 Chrome 内核。
  • 建议同时启用开启 API 支持,方便页面控制最小化、关闭等行为。
  • 可根据实际用途勾选置顶窗口,让桌面挂件保持在最前面。
  • 窗口宽高建议设置为固定尺寸,避免透明组件被拉伸后布局错乱。
  • 透明区域可能穿透到桌面或下层窗口,交互区域应尽量明确。

透明窗口效果

常见问题

为什么按钮点不了?

通常是按钮位于 -webkit-app-region: drag 区域内。请给按钮或按钮父级设置 -webkit-app-region: no-drag

为什么窗口拖不动?

请确认页面中至少有一个可见区域设置了 -webkit-app-region: drag,并且该区域没有被其他元素覆盖。

为什么关闭按钮不生效?

请确认打包时已经勾选开启 API 支持,并且代码运行在打包后的 EXE 中。