Plugin API
简体中文
简体中文
  • 入門
    • 简介
    • 你的第一个插件
    • 文件结构概述
    • 插件类型
      • 窗口
      • 背景服務
      • 格式扩展
      • 检查器
    • 调试插件
    • 开发交流群
  • 部署
    • 准备插件
    • 打包插件
    • 发布插件
    • 更新插件
    • 开发者政策
    • 插件图标模板
  • 开发指南
    • manifest.json 完整配置
    • 取得数据
    • 修改数据
    • 存取本地文件
    • 发出网路请求
    • 使用 Node.js 原生 API
    • 使用第三方模快
    • 多国语言(i18n)
    • 无边框窗口
  • API 参考
    • event(事件)
    • item(项目)
    • folder(文件夾)
    • tag(标签)
    • tagGroup(标签群组)
    • library(资源库)
    • window(窗口)
    • app(应用)
    • os(操作系统)
    • screen(屏幕)
    • notification(通知)
    • contextMenu(右鍵菜單)
    • dialog(对话框)
    • clipboard(剪贴板)
    • drag(拖拽文件)
    • shell(壳)
    • log(日志)
  • 额外组件
    • FFmpeg
由 GitBook 提供支持
在本页
  • 创建无边框窗口​
  • 可拖拽区
  1. 开发指南

无边框窗口

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

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

创建无边框窗口​

在 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(事件)

最后更新于2年前