动态添加 <webview> 不起作用答案

【问题标题】：Dynamically adding a <webview> doesn't work动态添加 <webview> 不起作用
【发布时间】：2018-06-01 20:30:27
【问题描述】：

在我的 Electron 应用程序中，我希望通过 HTML 文件动态添加 <webview>，以便它们在不同于主渲染器的进程中渲染。

我使用 Handlebars 在 Javascript 中管理我的模板。

当我动态添加<webview> 时，它不起作用。

在我的渲染器中，我这样做：

// library inclusion

let templateElement = document.createElement('template')
templateElement.innerHTML = Handlebars.compile(document.querySelector('template').innerHTML)(data) // data contain the id (myWebview) and html (file://[...])
let content = templateElement.content
document.querySelector('#myDiv').appendChild(content.querySelector('#myWebview')) // here, the <webview> is created and placed in the right position

let webview = document.querySelector('webview') // return the <webview>
webview.addEventListener('dom-ready', () => {
    // this event never called
    webview.loadURL(webview.getAttribute('src'))
})

这里是我的.html：

<div id="myDiv"></div>

<script id="template" type="text/x-handlebars-template">
    <webview id="{{id}}" src="{{html}}"></webview>
</script>

编辑

当我将<webview> 直接添加到 HTML 时，它可以正常工作。当我将<webview> 更改为<iframe> 时，它可以工作。

【问题讨论】：

标签： javascript webview handlebars.js electron

【解决方案1】：

我认为<script> 标签阻止<webview> 被电子考虑。

为了解决这个问题，我将<webview> 标记直接放在 HTML 中，然后用 JavaScript 检索它（不使用 Handlebars）。

【讨论】：