提问人：klados 提问时间：9/6/2023 更新时间：9/6/2023 访问量：51
从 Electron BrowserView 中提取输入字段填充的数据
Extract Input field filled data from Electron BrowserView
问：
例如，这是一个具有适当安全设置的简单设置，但此项目需要的除外。BrowserWindowwebviewTag: true
let webPrefs = {
plugins: false,
nodeIntegration: false,
nodeIntegrationInWorker: false,
webviewTag: true,
sandbox: true,
enableRemoteModule: false,
contextIsolation: true,
disableBlinkFeatures: "Auxclick",
webSecurity: true
};
let winOpts = {
...
show: true,
webPreferences: webPrefs
};
...
win = new BrowserWindow(winOpts);
const view = new BrowserView(winOpts);
win.setBrowserView(view);
...
view.webContents.loadURL("https://example.com").then(result => {
....
});
假设网站包含多个字段。example.com<form><input>
用户将在这些字段上键入文本。<input>
我想从这些字段中提取“手动填写”的文本。
该网页不是我的，因此无法修改网站。<input>
webContents.executeJavaScript()可以是一个起点，但找不到如何将值本身“提取”到流程中。main
（可以使用上述功能从主流程填写表格。
我怎样才能做到这一点？
答：
1赞
eli chen
9/6/2023
#1
在您的主要导入中，像这样ipcMainelectron
const { ipcMain, app, BrowserWindow,BrowserView } = require("electron");
在添加预加载文件中。例如webPrefs
let webPrefs = {
plugins: false,
nodeIntegration: false,
nodeIntegrationInWorker: false,
webviewTag: true,
sandbox: true,
enableRemoteModule: false,
contextIsolation: true,
disableBlinkFeatures: "Auxclick",
webSecurity: true,
preload:"./preload.js"
};
创建一个新的预加载文件，并将其命名为“预加载.js”。当然，您可以为它命名，并且可以命名任何您想要的名称，只需确保在上面设置正确的文件名即可。preload
此文件就像 WebView 和 Main Process 之间的桥梁。预加载脚本在加载渲染器进程之前运行，并且可以访问渲染器全局变量（例如窗口和文档）和 Node.js 环境。
将以下代码放入 filepreload.js
const { ipcRenderer } = require("electron");
window.addEventListener("input", (e) => {
//dom_element_id = the id of input element you want
if (e.target.id === "dom_element_id")
ipcRenderer.invoke("INPUT_OCCURED", e.target.value);
});
现在回到你的主文件，例如，你可以添加
win.loadURL("https://www.example.com");
ipcMain.handle("INPUT_OCCURED", (event, data) => {
console.log(data);
});
您需要的所有代码。现在再做一些解释。
预加载文件在 WebView 内容之前加载，可以运行所需的任何内容。它还可以访问节点的东西。我们所做的是，它使用IPC在预载和主载之间进行通信。我们在 preload 中添加一个全局侦听器，该侦听器列出了所有输入事件。然后他检查 id 是否匹配，则将 DOM 元素值发送到 main。主要在列表中获取事件数据dom_element_idINPUT_OCCURED
我添加一个全局侦听器而不是获取元素并将侦听器添加到他的原因只是为了示例的简单性
评论
0赞
klados
9/7/2023
谢谢！我第一次忘记使用脚本。只需稍作修改即可将侦听器添加到特定元素中，并将其放在上面以确保捕获 .preload<input>document.getElementById('myinput').addEventListener('change', (e) => {});window.addEventListener('DOMContentLoaded')<input>
评论