Javascript 如何在避免webview或browserview的同时在Electron.js主窗口页面顶部呈现内容

假设您像启动任何其他应用程序一样启动电子桌面应用程序：

//main.js
const {app, BrowserWindow, BrowserView, } = require('electron')

function createWindow () {
  // Create the browser window.
  const mainWindow = new BrowserWindow({
    width: 800,
    height: 400,
    webPreferences: {
      preload: path.join(__dirname, 'preload.js'),
      webviewTag: true,
      nodeIntegration: true
    }
  })
mainWindow.loadURL('https://www.google.com')

这将为谷歌打开一个电子页面。我现在想，当用户悬停在顶部时，用按钮渲染一个条形图/导航栏。具体使用（否）时如何执行此操作

我拒绝的解决方案

解决方案1：

我可以简单地避免

mainWindow.loadURL（'https://www.google.com）

并使用带有

的.html页面，并对顶部的栏进行编码。我之所以回避，是因为据Electron称，“正在经历巨大的架构变化。这会影响Web视图的稳定性”。事实上，我在使用webview时遇到了问题，因为内容有时根本无法呈现

解决方案2：

我可以用来生成“网页”。事实上，我喜欢这个解决方案，但我没有得到完整的结果，我认为它仍然是实验性的，这可能是原因

  const view = new BrowserView()
  mainWindow.setBrowserView(view)
  view.setBounds({ x: 0, y: 15, width: 800, height: 525 })
  view.setAutoResize({width: true, height: true})
  view.webContents.loadURL('https://google.com')

我会将BrowserView放置在Y:15，并将顶部显示的内容保留在顶部（从.html页面）。我认为此解决方案不理想的唯一原因是：

当BrowserView用于导航可以全屏观看的内容时（例如YouTube、TikTok视频等），它会在底部和顶部留下白色条（记住Y设置为15）

这是一个使用BrowserView的全屏视频示例： 请注意，这两个白色条并没有被全屏完全覆盖

对于解决方案#2，当内容以全屏显示但没有结果时，我考虑过调整内容的大小

view.webContents.on('enter-html-full-screen', function(){
     view.setBounds({ x: 0, y: 0 }) // set y to 0 to remove the top bar in fullscreen
    /// generates an error instead

})

---

目前遇到了同样的问题，在顶部实现了一个标题栏（使应用程序更加跨平台友好）。你解决了这个问题吗？你的方法是什么？我尝试的一种方法是在主Browser窗口上覆盖BrowserView。这个问题是用户点击没有在标题栏上注册。@Poption我决定改变设计，不使用标题栏，因为它不是真正的服务。很抱歉，没有解决方案，因为我没有深入研究同一个问题，在顶部实现标题栏（使应用程序更跨平台友好）。你解决了这个问题吗？你的方法是什么？我尝试的一种方法是在主Browser窗口上覆盖BrowserView。这个问题是用户点击没有在标题栏上注册。@Poption我决定改变设计，不使用标题栏，因为它不是真正的服务。抱歉，没有解决办法，因为我挖得不够深