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

Question

在 Electron <webview> documentation 上有一个可以与对象一起使用的方法列表。当我尝试运行任何方法时，其中 none 有效。当我在检查器中检查 <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

网络视图的文档说：

If you want to control the guest content in any way, you can write JavaScript that listens for webview events and responds to those events using the webview methods.

根据这条线索，我可以使用以下代码在 webview 上调用 openDevTools：

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

我猜这些方法没有立即应用于 webview。我尝试在 document.readystate == "complete" 上访问它们，但它们仍然不可用。希望绑定到上面的事件将为您提供所需的功能。

Answer 2

我发现了这个问题并在 Electron Documentation

中添加了一个示例

最重要的是，您需要向 webview 添加一个侦听器，用于侦听 webview 元素何时准备就绪：

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

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

更详细的解释：

当 window 最初呈现 DOM 时，webview 方法不可用。最初，<webview> 元素的原型仍然是通用的 HTMLElement。

页面渲染后，<webview>元素开始加载，然后其原型更改为webview原型（与元素同名）。当它获得对 webview 原型的访问权限时，它就获得了对所有 webview 原型方法的访问权限。

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

How to use the <webview> methods in Electron

javascript

chromium

node.js

electron