我正在尝试使用 Electron.js 构建一个桌面应用程序。我希望它的行为类似于在线测试应用程序，用户只能访问该测试应用程序，但这种行为应该发生在我的电子应用程序中。我希望通过单击我的应用程序中的按钮来切换此冻结。
从 AI 助手那里获取一些代码后，我得到了这个，但它不起作用，并且作为 Electron.js 的新手，我无法继续前进。
索引.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!-- https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP -->
<meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self'">
<title>Hello World!</title>
</head>
<body>
<h1>Block Other Applications</h1>
<button id="blockButton">Block Other Apps</button>
<!-- You can also require other files to run in this process -->
<script>
const { ipcRenderer } = require('electron');
document.getElementById('blockButton').onclick = () => {
alert('Blocking!')
ipcRenderer.send('block-apps');
};
</script>
</body>
</html>
main.js
const path = require('node:path')
app.whenReady().then(createMainWindow);
ipcMain.on('block-apps', (event) => {
createOverlayWindow();
});
ipcMain.on('restore-apps', (event) => {
if (overlayWindow) {
overlayWindow.close();
overlayWindow = null;
}
});
app.on('window-all-closed', () => {
app.quit();
});
//Code to create an overlay
let mainWindow;
let overlayWindow;
function createMainWindow() {
mainWindow = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
nodeIntegration: true,
contextIsolation: false,
},
});
mainWindow.loadFile('index.html');
}
function createOverlayWindow() {
overlayWindow = new BrowserWindow({
width: 1920, // Set based on your screen resolution
height: 1200, // Set based on your screen resolution
frame: false,
transparent: true,
alwaysOnTop: true,
resizable: false,
movable: false,
fullscreen: true,
webPreferences: {
nodeIntegration: true,
contextIsolation: false,
},
});
overlayWindow.loadFile('overlay.html');
}
overlay.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Overlay</title>
<style>
body {
background-color: rgba(0, 0, 0, 0.8);
color: white;
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
font-size: 2em;
}
</style>
</head>
<body>
<div>
Other applications are blocked.
<br><br>
<button id="restoreButton">Restore Access</button>
</div>
<script>
const { ipcRenderer } = require('electron');
document.getElementById('restoreButton').onclick = () => {
ipcRenderer.send('restore-apps');
};
</script>
</body>
</html>
您从 AI 助手获得的输出不是您所需要的。
您需要做的是使您的电子应用程序全屏显示，然后将任何可以将窗口焦点更改为这样的函数的事件绑定：
Event =>
{
// Prevent the default action that would change the window focus.
Event.preventDefault();
// Try to force this window to receive the focus.
window.focus();
// You can do any other thing here too.
}
您应该寻找诸如
keypresskeyupkeydownfocusout