如何向 Electron 应用程序添加自定义标题栏？

Question

我想创建一个自定义标题栏/控件以显示在电子应用程序中加载的遥控器 URL 上方。

例如，假设我有一个名为 title.html:

的文件

<div>
    <button onclick="window.history.forward()">Go Forward</button>
    <button onclick="window.history.back()">Go Back</button>
</div>

假设我正在我的电子应用程序中加载 youtube URL：

const createWindow = () => {
    const window = new BrowserWindow({
        width: 800,
        height: 600,
        titleBarStyle: 'hiddenInset',
    })

    window.loadURL('https://youtube.com')
}

如何让我的 title.html 始终显示在 YouTube 上方，以便我可以添加后退和前进按钮和其他内容？

Answer 1

我认为这里的策略是将您的 title.html 加载到 BrowserWindow，然后创建一个托管 youtube 的 BrowserView 并将其放置在适当的位置。

（在我的应用中，我使用 frame: false 而不是 hiddenInset，但希望类似的想法可以应用在这里）

import * as path from "path";
import { BrowserWindow, BrowserView } from "electron";

const TITLEBAR_HEIGHT = 50; // px

const createWindow = () => {
    const window = new BrowserWindow({ width: 800, height: 600, titleBarStyle: 'hiddenInset' })
    const browserView = new BrowserView({ webPreferences: { sandbox: true, contextIsolation: true });
    window.setBrowserView(browserView);
    
    // load your titlebar page
    await window.loadFile(path.join(__dirname, "./index.html"))

    // position the titlebar
    const contentBounds = window.getContentBounds();
    browserView.setBounds({ x: 0, y: 0, width: contentBounds.width, height: contentBounds.height - TITLEBAR_HEIGHT });
    browserView.setAutoResize({ width: true, height: true });

    browserView.loadURL('https://youtube.com');    
}

然后您将在样式表中设置标题栏的高度：

<div id="titlebar>
    ...
</div>

#titlebar {
    height: 50px;
}

如何向 Electron 应用程序添加自定义标题栏？

How do you add a custom title bar to an Electron app?

javascript

electron