无边框窗口

打开一个无工具栏、边框、和其它图形化外壳的窗口。

无边框窗口是一种特殊的窗口模式，它不带有外壳（包括窗口边框、标题栏、工具栏等），只含有网页内容。使用无边框窗口模式可以让您完全自定义窗口界面，让您的应用程序在所有操作系统上的风格都保持一致。不过，由于无边框窗口没有系统自带的外壳，因此在使用时需要注意，以免影响用户体验。

创建无边框窗口​

在 manifest.json 文件中，将 window 对象的 frame 属性设置为 false，即可启用无边框窗口模式。

{
    "id": "LB5UL2P0Q9FFF",
    "version": "1.0.0",
    "name": "Hello World",
    "logo": "/logo.png",
    "keywords": ["keywrod1", "keywrod2"],
    "main":
    {
        "frame": false,        // 👈 无边框模式
        "url": "index.html",
        "width": 640,
        "height": 480
    }
}

可拖拽区

您可以在应用程序中使用 -webkit-app-region 属性，来控制应用程序窗口的可拖拽区域。

默认情况下, 无边框窗口是不可拖拽的。 应用程序需要在 CSS 中指定 -webkit-app-region: drag 来告诉插件哪些区域是可拖拽的（如操作系统的标准标题栏），在可拖拽区域内部使用 -webkit-app-region: no-drag 则可以将其中部分区域排除。 请注意, 当前只支持矩形形状。

要使整个窗口可拖拽, 您可以添加 -webkit-app-region: drag 作为 body 的样式:

<body style="-webkit-app-region: drag">
</body>

请注意，如果您使整个窗口都可拖拽，则必须将其中的按钮标记为不可拖拽，否则用户将无法点击它们：

button {
  -webkit-app-region: no-drag;
}

如果只将自定义标题栏设置为可拖拽，还需要使标题栏中的所有按钮都不可拖拽。

上一页多国语言（i18n）下一页event（事件）

最后更新于