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

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

所有方法都存储在原型中。 所以当我使用这些方法时(例如myWebview.openDevTools() ),我的元素基本上应该从它的原型inheritance那些方法。

然而! 当我使用Object.getProptotypeOf(myWebview)我得到HTMLElement ,而不是像它显示在检查器中的Object.getProptotypeOf(myWebview)

这是我的代码的一个例子:

 <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> 

我发现了这个问题,并在Electron Documentation中增加了一个例子

底线是,你需要添加一个侦听器的web视图,监听webview元素准备就绪:

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

根据@Shwany的说法,当did-start-loading事件被did-start-loading时,webview的方法将可用,但是最好是等待webview元素完全准备好,使用dom-ready


有关更详细的解释:

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

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

webview的文档说:

如果要以任何方式控制访客内容,可以编写监听webview事件的JavaScript,并使用webview方法响应这些事件。

键入这个线索,我可以通过使用以下代码在webview上调用openDevTools:

  <script> var myWebview = document.getElementById('myWebview'); myWebview.addEventListener("did-start-loading", function (e) { myWebview.openDevTools(); }); </script> 

我猜测这些方法不适用于web视图。 我试图访问他们document.readystate ==“完整”,但他们仍然不可用。 希望绑定到上面的事件会得到你需要的function。