跳到主要内容

透明窗口与无边框窗口

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

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

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

打包工具配置​

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

无边框窗口设置

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

注意

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

设置透明背景​

在页面中将 html 和 body 设置为透明背景：

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 中。