在创建透明窗口后,偶尔会出现窗口只在任务栏能看到有任务但是窗口本身没有显示出来的情况。
按照官方文档,创建简单的透明窗口:
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这个属性,官方文档是这么解析的:
backgroundThrottling
Boolean (optional) - Whether to throttle animations and timers when the page becomes background. Defaults totrue
.
所以如果设置了这个属性,在遇到上述问题的时候,记得要把这个属性去掉。