在 atom Electron 中从 webview 访问 DOM答案

【问题标题】：Accessing the DOM from webview in atom Electron在 atom Electron 中从 webview 访问 DOM
【发布时间】：2016-09-14 17:01:27
【问题描述】：

是否可以从 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>

【问题讨论】：

你能贴出你目前尝试过的代码吗？
调试器中t的值显示为未定义
可能是重复的问题，stackoverflow.com/questions/33523171/…
所以我应该尝试注入 webview 的 iframe 或 ipc 请求？对吗？
我发布了一些标记，显示了 webview 标记中的实际内容，现在有一种从对象中提取 html 的方法，但它是浏览器插件类型，有人可以解释一下吗？

标签： javascript node.js github electron atom-editor

【解决方案1】：

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

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

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

【讨论】：

好吧，我对电子很陌生，我可以提供一个示例或示例项目来显示从 web 视图中抓取的内容吗？
@apaul 是的，我会尽快整理一个示例并将其发布在这里
@apaul 添加了示例
非常感谢，我一直在阅读代码，它将在我自己的浏览器开发过程中帮助我
太棒了！如果有帮助，请务必接受我的回答:)