無邊框視窗

開啓一個無工具欄、邊框、和其它圖形化外殼的視窗。

無邊框視窗是一種特殊的視窗模式,它不帶有外殼(包括視窗邊框、標題欄、工具欄等),只含有網頁內容。使用無邊框視窗模式可以讓您完全自定視窗介面,讓您的應用程式在所有作業系統上的風格都保持一致。不過,由於無邊框視窗沒有系統自帶的外殼,因此在使用時需要注意,以免影響使用者體驗。

新增無邊框視窗​

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;
}

如果只將自定標題欄設定為可拖曳,還需要使標題欄中的所有按鈕都不可拖曳。

Last updated