解决electron嵌入webview显示空白无法使用
程序员文章站
2022-03-03 22:38:56
...
默认情况下,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;
}
});
下一篇: 2016上海某公司面试题_1