繁體中文

無邊框視窗

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

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

新增無邊框視窗​

在 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（事件）

最后更新于