如何在Electron中使用<webview>方法

Question

在Electron <webview> 文档中,有一个可以与对象一起使用的方法列表.当我尝试运行任何方法时,它们都不起作用.当我在检查器中查看<webview>元素的属性时,它说它的原型是webview.(__proto__ : webview)

正是在那个存储所有方法的原型中.因此,当我使用这些方法时,我的元素基本上应该从它的原型继承那些方法(例如myWebview.openDevTools()).

然而!当我使用时,Object.getProptotypeOf(myWebview)我得到的HTMLElement,webview不像它在检查员中显示的那样.

这是我的代码示例:

<webview id="myWebview" src="path/to.file"></webview>

<script> 
  var myWebview = document.getElementById('myWebview');
  console.log("myWebview: ",myWebview);
  console.log("prototype: ",Object.getPrototypeOf(myWebview)); //=> HTMLElement
  myWebview.openDevTools();
</script>

Answer 1

我发现了这个问题并在电子文档中添加了一个示例

最重要的是,您需要向webview添加一个侦听器,该侦听器在webview元素准备就绪时进行侦听:

webview.addEventListener("dom-ready", function(){
  webview.openDevTools();
});

根据@Shwany的说法,当did-start-loading事件被触发时,webview的方法将可用,但是等待webview元素完全准备就绪可能是更好的做法dom-ready

有关更详细的说明:

当窗口最初呈现DOM时,webview方法不可用.最初,<webview>元素的原型仍然是通用的HTMLElement.

它在页面呈现<webview>元素开始加载之后,然后将其原型更改为webview原型(与元素同名).当它获得对webview原型的访问权限时,它可以访问所有webview原型方法.