新版Electron中BrowserView替代getWebContentsId()的方法

BrowserView 不需要调用单独方法获取 web contents ID，实例本身直接挂载了完整的 webContents 对象，直接读取属性即可拿到对应ID。

新旧写法对比 #

旧版 WebviewTag 写法（已废弃）

// 渲染进程中获取webview标签对应的webContents ID
const webviewDom = document.querySelector('webview')
const oldWebContentsId = webviewDom.getWebContentsId()

新版 BrowserView 替代写法：

• BrowserView 是主进程模块，所有实例操作都需要在主进程中完成
• 创建 BrowserView 实例后，直接读取 实例.webContents.id 就能拿到和旧方法返回值完全一致的唯一ID，不需要额外调用查询方法

const { BrowserWindow, BrowserView } = require('electron')

// 创建窗口和BrowserView实例
const mainWin = new BrowserWindow({ width: 1000, height: 800 })
const browserView = new BrowserView()
mainWin.setBrowserView(browserView)
browserView.setBounds({ x: 0, y: 0, width: 1000, height: 800 })
browserView.webContents.loadURL('https://target-page.com')

// 替代原getWebContentsId()的获取方式
const webContentsId = browserView.webContents.id

迁移补充说明 #

• 原 WebviewTag 依赖 webContents ID 才能调用的页面控制、进程通信、事件监听等能力，在 BrowserView 中可以直接通过 browserView.webContents 实例调用，不需要先拿ID再匹配对应webContents对象，链路更短。
• 如果渲染进程需要用到这个ID，通过Electron的IPC通道把主进程拿到的ID值传到渲染进程即可，不要在渲染进程直接实例化或操作BrowserView。

内容的提问来源于stack exchange，提问作者Mahdi Monhi