electron使用webview出现空白页面解决办法

1024小神

于 2024-01-02 19:24:13 发布

阅读量1.2k

点赞数 8

分类专栏：多端开发文章标签： electron javascript 前端

本文链接：https://blog.csdn.net/weixin_44786530/article/details/135347930

版权

多端开发专栏收录该内容

295 篇文章

订阅专栏

本文讲述了在Electron5及以上版本中，webview标签默认被禁用导致的空白页面问题，介绍了如何在BrowserWindow配置中启用webviewTag并设置preload.js文件以显示网页内容。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在使用webview标签的时候，出现了空白页面的情况，刚开始以为没有生效，后来发现页面上是有这个标签的，但是没有展示出内容，后来看了官网，默认情况下，webview标签在 Electron >= 5 中被禁用。

  <webview id="foo" src="https://www.baidu.com/" style="display:inline-flex; width:840px; height:980px"></webview>

如果需要使用，需要单独配置：在BrowserWindow 中单独配置开启

const mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      webviewTag: true,
      preload: path.join(__dirname, 'preload.js')
    }
  })

开启之后，就会显示出来了：