Electron动态创建webview调用loadURL报非函数错误如何解决

问题场景 #

使用JavaScript的document.createElement方法动态创建webview元素时，元素所有内置方法均为undefined。
最简复现代码如下：

let wv = document.createElement("webview");
wv.loadURL("https://google.com");

运行代码后抛出如下报错：

Uncaught TypeError: wv.loadURL is not a function

补充说明：已确认主进程的webPreferences配置中开启了webviewTag选项。

故障原因 #

Electron中的webview属于自定义内置元素，仅在元素被插入DOM树、完成自定义元素升级流程后，才会挂载loadURL等内置方法。仅在内存中创建元素、未挂载到DOM时直接调用方法，就会触发上述类型错误。

修复步骤 #

• 首先将创建完成的webview元素插入到当前页面的DOM节点中
• 等待webview元素完成初始化、内部DOM加载就绪后，再调用对应内置API

正确示例代码 #

基础写法：

// 创建webview实例
const wv = document.createElement("webview");
// 先将元素插入DOM树
document.body.append(wv);
// 监听dom-ready事件，元素就绪后再调用API
wv.addEventListener('dom-ready', () => {
  wv.loadURL("https://google.com");
});

如果需要规避自定义元素升级时序问题，可以搭配customElements.whenDefined做更稳妥的判断：

const wv = document.createElement("webview");
document.body.append(wv);

customElements.whenDefined('webview').then(() => {
  wv.addEventListener('dom-ready', () => {
    wv.loadURL("https://google.com");
  });
});

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