所以我是电子新手，对于我的第一个项目，我决定为浏览器游戏做一个简单的客户端。本质上我想做的是加载网站，然后在其上方添加一些 HTML 以添加某些功能，例如关闭/最小化/最大化，以及一个不是默认 Windows 的导航栏。
我遇到的问题是我似乎无法加载该网站及其上面的 HTML（如果可能的话）。有人可以帮我解决这个问题吗？
const { app, BrowserWindow /* ipcMain */ } = require('electron')
const path = require('path')
function createWindow () {
const mainWindow = new BrowserWindow({
width: 800,
height: 600,
frame: false,
webPreferences: {
preload: path.join(__dirname, 'preload.js')
}
})
mainWindow.loadURL('https://bapbap.gg')
}
/*win.loadFile('index.html')*/
app.whenReady().then(() => {
createWindow()
app.on('activate', () => {
if (BrowserWindow.getAllWindows().length === 0) {
createWindow()
}
})
})
/*
ipcMain.on('close', () => {
app.quit()
})
*/
app.on('window-all-closed', () => {
if (process.platform !== 'darwin') {
app.quit()
}
})
这是可能的。
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div>
<button>Minimize</button>
<button>Maximize</button>
<button>Close</button>
</div>
<webview src="https://bapbap.gg"></webview>
</body>
</html>
index.js
const { app, BrowserWindow, /* ipcMain */
webContents} = require("electron");
const path = require("path");
function createWindow() {
const win = new BrowserWindow({
width: 800,
height: 600,
frame: false,
webPreferences: {
webviewTag: true,
},
});
win.loadFile("index.html");
}
app.whenReady().then(() => {
createWindow();
app.on("activate", () => {
if (BrowserWindow.getAllWindows().length === 0) {
createWindow();
}
});
});
/*
ipcMain.on('close', () => {
app.quit()
})
*/
样式.css
body {
display: flex;
flex-direction: column;
margin: 0;
height: 100vh;
}
webview {
flex: 1;
}
为了保持线程最新，我建议阅读 Electron 文档中的 Web Embeds 页面。 Electron 不推荐接受的答案。 https://www.electronjs.org/docs/latest/tutorial/web-embeds
我目前正在开发一个专为 Raspberry Pi 设计的 Kiosk 应用程序，它同样只显示另一个网页。您可以依靠 BrowserWindow 或 BaseWindow 的构造函数选项中的本机应用程序窗口结构来处理应用程序控制（最大/最小/关闭）。见下文
const mainWindow = new BaseWindow({
width: 1920,
height: 1080
});
const view = new WebContentsView();
// Put your URL in here
view.webContents.loadURL("https://bapbap.gg");
// This expands the WebContentsView to the max bounds of the BaseWindow parent.
view.setBounds(mainWindow.getBounds());
// Now add it to the BaseWindow parent
mainWindow.contentView.addChildView(view);