javascript 如何在 Electron 中使用 <webview> 方法
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/30765923/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to use the <webview> methods in Electron
提问by Sam Eaton
On the Electron <webview>documentationthere is a list of methods that you can use with the object. When I try to run any of the methods, none of them work. When I looked in inpect the properties of the <webview>element in the inspector, it says that its prototype is webview. (__proto__ : webview)
在 Electron<webview>文档中，有一个可用于对象的方法列表。当我尝试运行任何方法时，它们都不起作用。当我在检查器中查看<webview>元素的属性时，它说它的原型是webview. ( __proto__ : webview)
It is in that prototype where all of the methods are stored. So my element should basically just inherit those methods from its prototype when I use those methods (e.g. myWebview.openDevTools()).
正是在该原型中存储了所有方法。因此，当我使用这些方法（例如myWebview.openDevTools()）时，我的元素应该基本上只从其原型继承这些方法。
However! when i use Object.getProptotypeOf(myWebview)I get HTMLElement, NOT webviewlike it shows in the inspector.
然而！当我使用Object.getProptotypeOf(myWebview)I get 时HTMLElement，webview不像它在检查器中显示的那样。
Here is an example of my code:
这是我的代码示例：
<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>
回答by Sam Eaton
I discovered the issue and added an example to the Electron Documentation
我发现了这个问题并在电子文档中添加了一个示例
The bottom line is that you need to add a listener to the webview that listens for when the webview element is ready:
最重要的是，您需要向 webview 添加一个侦听器，用于在 webview 元素准备就绪时进行侦听：
webview.addEventListener("dom-ready", function(){
webview.openDevTools();
});
According to @Shwany, the webview's methods will be available when the did-start-loadingevent is fired, however it may be better practice to wait until the webview element is completely ready using dom-ready
根据@Shwany 的说法，当did-start-loading事件被触发时，webview 的方法将可用，但是最好等到 webview 元素完全准备好使用dom-ready
For a more detailed explanation:
更详细的解释：
When the window is initially rendering the DOM, the webview methods are not available. Initially, the prototype for the <webview>element is still the generic HTMLElement.
当窗口最初渲染 DOM 时，webview 方法不可用。最初，<webview>元素的原型仍然是通用的HTMLElement。
It as after the page renders that the <webview>element begins loading and then its prototype is changed to the webview prototype (same name as the element). And when it gains access to the webview prototype, it gains access to all of the webview prototype methods.
在页面呈现之后，<webview>元素开始加载，然后其原型更改为 webview 原型（与元素同名）。当它获得对 webview 原型的访问权限时，它就可以访问所有 webview 原型方法。
回答by Shawn Rakowski
The documentation for the webview says:
webview的文档说：
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.
如果您想以任何方式控制访客内容，您可以编写 JavaScript 来侦听 webview 事件并使用 webview 方法响应这些事件。
Keying off of this clue I was able to call openDevTools on the webview by using the following code:
根据这条线索，我可以使用以下代码在 webview 上调用 openDevTools：
<script>
var myWebview = document.getElementById('myWebview');
myWebview.addEventListener("did-start-loading", function (e) {
myWebview.openDevTools();
});
</script>
I am guessing the methods are not applied to the webview right away. I tried accessing them on document.readystate == "complete" but they still were not available. Hopefully binding to the event above will get you the functionality you need.
我猜这些方法不会立即应用于 webview。我尝试在 document.readystate == "complete" 上访问它们，但它们仍然不可用。希望绑定到上述事件将为您提供所需的功能。
