在atom Electron中从webview访问DOM

Question

是否有可能从atom电子桌面开发工具包中的webview元素中抓取html，我试图访问DOM但什么也得不到，我在运行时尝试了控制台中的document.links，但得到的结果是空的属性和对象？

 window.onresize = doLayout;
 var isLoading = false;

onload = function() {
var webview = document.querySelector('webview');
doLayout();

var t = webview.executeJavaScript("console.log(document.links);");

document.querySelector('#back').onclick = function() {
webview.goBack();
};

<object is="browserplugin" type="application/browser-plugin" id="browser-plugin-1" style="flex: 1 1 auto;"></object>

Answer 1

您的console.log正在登录webview的控制台，而不是父渲染器进程的控制台。从父渲染器运行document.querySelector('webview').openDevTools() (在webview上有了src之后，在此之前其他方法不可用)。这将打开另一个开发工具窗口。从该控制台，您应该可以看到您的日志。请注意，webview和托管webview的渲染器是两个独立的webContents实例和两个独立的渲染器进程。您可以通过IPC在它们之间或主进程之间进行通信。

我不确定您的目标是什么，但是如果您想在webview中进行DOM操作，我建议您使用preload script。此脚本在webview的JS之前运行，并允许您访问所有node.js和渲染器电子API以及DOM。executeJavaScript将是一条漫长而艰难的道路，而preload脚本就是为这种用例而构建的。

下面是一个示例，演示了1)打开webview的devtools，2)在webview的上下文中运行访问DOM的预加载脚本，3)通过IPC：https://github.com/ccnokes/electron-tutorials/tree/master/preload-scripts在父渲染器进程及其子webview进程之间进行通信