在創建透明窗口后,偶爾會出現窗口只在任務欄能看到有任務但是窗口本身沒有顯示出來的情況。
按照官方文檔,創建簡單的透明窗口:
const { app, BrowserWindow } = require('electron');
function createWindow() {
const mainWindow = new BrowserWindow({
width: 800,
height: 600,
transparent: true, // 設置窗口為透明
frame: false, // 去除窗口的邊框
webPreferences: {
nodeIntegration: true
}
});
mainWindow.loadFile('index.html'); // 加載你的HTML文件
// 打開開發者工具
mainWindow.webContents.openDevTools();
}
app.whenReady().then(createWindow);
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Transparent Window</title>
<style>
body {
background-color: transparent;
}
</style>
</head>
<body>
<h1>Hello, Transparent Window!</h1>
</body>
</html>
但是在創建窗口的時候無意中添加了屬性:backgroundThrottling:false,就導致透明窗口有時候顯示異常了,所以不能加backgroundThrottling這個屬性,官方文檔是這么解析的:
backgroundThrottlingBoolean (optional) - Whether to throttle animations and timers when the page becomes background. Defaults totrue.
所以如果設置了這個屬性,在遇到上述問題的時候,記得要把這個屬性去掉。