javascript - 如何在 Electron 中使用 方法

Question

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

所有方法都存储在该原型(prototype)中。因此，当我使用这些方法时，我的元素基本上应该从其原型(prototype)继承这些方法(例如 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

我发现了这个问题并在 Electron Documentation 中添加了一个示例

最重要的是，您需要在 webview 元素准备就绪时向 webview 添加一个监听器:

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

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

---

更详细的解释:

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

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