解决electron嵌入webview显示空白无法使用

默认情况下,webview标签在 Electron >= 5 中被禁用。

官网介绍:https://www.electronjs.org/docs/latest/api/webview-tag

但是我们可以通过修改 BrowserWindow 配置,启用此功能

1,使用webview标签

<webview id="foo" src="https://www.baidu.com/" style="display:inline-block; width:640px; height:480px"></webview>

2.解决办法

webPreferences配置下webviewTag: true

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

其他知识点

allowpopups 是否允许打开超链接

事件监听

const self = this;

const webview = document.querySelector("webview");
// 监听加载中
webview.addEventListener("did-start-loading", () => {
  self.isLoading = true;
});
// 监听加载完毕
webview.addEventListener("did-stop-loading", () => {
  self.isLoading = false;
});
// 去除allowpopups属性后监听打开窗口
webview.addEventListener("new-window", (e) => {
  const protocol = require("url").parse(e.url).protocol;
  if (protocol === "http:" || protocol === "https:") {
    webview.src = e.url;
  }
});

猜你喜欢

转载自blog.csdn.net/a0405221/article/details/120928463