Electron应用中BrowserView初始不渲染，操作后才显示问题求助

我正在开发一款Electron应用，功能为在主进程中创建三个BrowserView：其中一个tabbar需始终显示，用于控制另外两个视图在BrowserWindow中的展示状态，开发使用electron builder框架。运行应用时窗口为空白，无内容显示；调整窗口大小后，添加的BrowserView才会显示。若添加tabbarView.webContents.toggleDevTools()代码，仅tabbar视图显示，其他视图需操作才渲染。

以下是主进程代码：

import { app, BrowserWindow, shell, ipcMain, BrowserView } from 'electron'
import { release } from 'node:os'
import { join } from 'node:path'

// The built directory structure
//
// ├─┬ dist-electron
// │ ├─┬ main
// │ │ └── index.js    > Electron-Main
// │ └─┬ preload
// │   └── index.js    > Preload-Scripts
// ├─┬ dist
// │ └── index.html    > Electron-Renderer
//
process.env.DIST_ELECTRON = join(__dirname, '..')
process.env.DIST = join(process.env.DIST_ELECTRON, '../dist')
process.env.PUBLIC = process.env.VITE_DEV_SERVER_URL
  ? join(process.env.DIST_ELECTRON, '../public')
  : process.env.DIST

// Disable GPU Acceleration for Windows 7
if (release().startsWith('6.1')) app.disableHardwareAcceleration()

// Set application name for Windows 10+ notifications
if (process.platform === 'win32') app.setAppUserModelId(app.getName())

if (!app.requestSingleInstanceLock()) {
  app.quit()
  process.exit(0)
}

// Remove electron security warnings
// This warning only shows in development mode
// Read more on https://www.electronjs.org/docs/latest/tutorial/security
// process.env['ELECTRON_DISABLE_SECURITY_WARNINGS'] = 'true'

let win: BrowserWindow | null = null
// Here, you can also use other preload
const preload = join(__dirname, '../preload/index.js')
const url = process.env.VITE_DEV_SERVER_URL
const indexHtml = join(process.env.DIST, 'index.html')

const views = {
  default: null,
  internet: null,
  tabbar: null,
}

async function createWindow() {  
  const defaultView = new BrowserView({
    webPreferences: {
      preload,
      // Warning: Enable nodeIntegration and disable contextIsolation is not secure in production
      // Consider using contextBridge.exposeInMainWorld
      // Read more on https://www.electronjs.org/docs/latest/tutorial/context-isolation
      nodeIntegration: true,
      contextIsolation: false,
    },
  })
  const internetView = new BrowserView(
    {
      webPreferences: {
        preload,
        // Warning: Enable nodeIntegration and disable contextIsolation is not secure in production
        // Consider using contextBridge.exposeInMainWorld
        // Read more on https://www.electronjs.org/docs/latest/tutorial/context-isolation
        nodeIntegration: true,
        contextIsolation: false,
      },
    },
  )
  const tabbarView = new BrowserView({
    webPreferences: {
      preload,
      nodeIntegration: true,
      contextIsolation: false,
    },
  })

  views.default = defaultView
  views.internet = internetView
  views.tabbar = tabbarView

  win = new BrowserWindow({
    title: 'Main window',
    icon: join(process.env.PUBLIC, 'favicon.ico'),
    webPreferences: {
      preload,
      // Warning: Enable nodeIntegration and disable contextIsolation is not secure in production
      // Consider using contextBridge.exposeInMainWorld
      // Read more on https://www.electronjs.org/docs/latest/tutorial/context-isolation
      nodeIntegration: true,
      contextIsolation: false,
    },
  })
  win.addBrowserView(defaultView)
  win.addBrowserView(tabbarView)

  if (process.env.VITE_DEV_SERVER_URL) { // electron-vite-vue#298
    defaultView.webContents.loadURL(url)
    // Open devTool if the app is not packaged
    // defaultView.webContents.openDevTools()
  } else {
    defaultView.webContents.loadFile(indexHtml)
  }

  // Test actively push message to the Electron-Renderer
  defaultView.webContents.on('did-finish-load', () => {
    defaultView?.webContents.send('main-process-message', new Date().toLocaleString())
  })

  // Make all links open with the browser, not with the application
  defaultView.webContents.setWindowOpenHandler(({ url }) => {
    if (url.startsWith('https:')) shell.openExternal(url)
    return { action: 'deny' }
  })
  // win.webContents.on('will-navigate', (event, url) => { }) #344
  

  tabbarView.webContents.loadFile(join(process.env.PUBLIC, 'tabbar.html'))


  function handleResize() {
    const { width, height } = win.getBounds()
    const viewsHeight = height - 50
    defaultView.setBounds({x: 0, y: 0, width, height: viewsHeight - 50})
    internetView.setBounds({x: 0, y: 0, width, height: viewsHeight - 50})
    tabbarView.setBounds({x: 0, y: viewsHeight - 50, width, height: viewsHeight})
  }
  
  handleResize()

  win.on('resize', () => {
    handleResize()
  })
}

app.whenReady().then(createWindow)

app.on('window-all-closed', () => {
  win = null
  if (process.platform !== 'darwin') app.quit()
})

app.on('second-instance', () => {
  if (win) {
    // Focus on the main window if the user tried to open another
    if (win.isMinimized()) win.restore()
    win.focus()
  }
})

app.on('activate', () => {
  const allWindows = BrowserWindow.getAllWindows()
  if (allWindows.length) {
    allWindows[0].focus()
  } else {
    createWindow()
  }
})

ipcMain.on('change-view', (event, viewName) => {
  const view = views[viewName]
  if (view) {
    // don't remove tabbar
    win?.removeBrowserView(views.default)
    win?.removeBrowserView(views.internet)
    win?.addBrowserView(view)
  }
})

问题原因分析 #

• 窗口初始化时序问题：调用handleResize时，BrowserWindow可能还未完成初始化，此时通过win.getBounds()获取的窗口尺寸不准确（比如默认窗口尺寸还未生效），导致BrowserView的bounds设置错误，无法在窗口内显示。
• Tabbar视图的bounds计算错误：tabbarView.setBounds中设置的高度为viewsHeight（即height - 50），而y坐标是viewsHeight -50，这会导致tabbar的底部超出窗口范围，甚至覆盖其他视图，同时高度设置不合理也会影响渲染。
• BrowserView渲染触发时机：在窗口未完全就绪时就加载视图内容并设置bounds，Electron可能未触发视图的渲染流程，只有当窗口resize时触发handleResize重新设置bounds，才会触发渲染。

修复方案 #

1. 调整handleResize的调用时机 #

监听BrowserWindow的ready-to-show事件，确保窗口完全初始化后再设置视图的bounds：

// 在createWindow函数中，替换原有的handleResize()调用
win.on('ready-to-show', () => {
  handleResize()
  win.show()
})

2. 修正Tabbar的bounds计算 #

将tabbar的高度固定为50，放在窗口底部，确保布局合理：

function handleResize() {
  const { width, height } = win.getBounds()
  const contentHeight = height - 50 // 预留tabbar的高度
  defaultView.setBounds({x: 0, y: 0, width, height: contentHeight})
  internetView.setBounds({x: 0, y: 0, width, height: contentHeight})
  tabbarView.setBounds({x: 0, y: contentHeight, width, height: 50}) // tabbar放在底部，高度50
}

3. 优化视图切换逻辑 #

在切换视图时，确保重新设置bounds，避免视图显示异常：

ipcMain.on('change-view', (event, viewName) => {
  const view = views[viewName]
  if (view && win) {
    // 移除内容视图，保留tabbar
    win.removeBrowserView(views.default)
    win.removeBrowserView(views.internet)
    win.addBrowserView(view)
    // 重新设置当前视图的bounds
    const { width, height } = win.getBounds()
    const contentHeight = height - 50
    view.setBounds({x: 0, y: 0, width, height: contentHeight})
  }
})

补充说明 #

当前代码中启用了nodeIntegration: true和contextIsolation: false，这在生产环境中存在安全风险，建议在生产环境中使用contextBridge暴露必要的API到渲染进程，遵循Electron的安全规范。

内容的提问来源于stack exchange，提问作者Max Luan