不使用index.html时自定义Electron标题栏

Question

使用以下代码时：

mainWindow.loadURL(`http://www.google.com/`);

我无法使用CSS/HTML制作自定义标题栏，因为我没有使用index.html文件，如果我使用以下代码，就可以使用index.html文件：

loaderWindow.loadURL(`file:///${__dirname}/loader.html`);

我已经尝试过像electron-titlebar-windows和custom-electron-titlebar这样的自定义npm包。但是在显示来自loadURL的外部页面时，似乎没有任何作用。

以下是我当前在渲染器进程中使用custom-electron-titlebar的实现：

let MyTitleBar = new customTitlebar.Titlebar({
  backgroundColor: customTitlebar.Color.fromHex('#03a9f4')
});

MyTitleBar.updateTitle('Test Title');

- Ignition K6

Answer 1

你应该能够使用setTitle文档

mainWindow.webContents.on('did-finish-load', () => {
  mainWindow.setTitle('Test Title');
});

- ChrisG

---

这种方法的问题在于我无法设置颜色...而这正是我想要的。理想的方式是使用CSS样式化标题栏，就像指定index.html一样。 - Ignition K6

那么，对于无法控制的页面，只嵌入iframe怎么样？ - ChrisG

iframe添加了一些我无法去除的垃圾边框。 - Ignition K6

@IgnitionK6 你可以使用 frameBorder 来删除它 <iframe frameBorder="0"></iframe>。 - ChrisG

非常有用的信息。简直不敢相信我没有想到过。但是我还有一个额外的问题...对于我的应用程序授权，我不能真正使用iframe。从用户体验的角度来看，它很完美，但从功能上来说最好使用window.loadurl。有没有不使用iframe就能更改标题栏样式的解决方案？ - Ignition K6

如果您无法控制HTML，则无法完全控制标题栏。 - ChrisG