javascript - 如何从 Electron 中的 webview.executeJavaScript 获取返回值

Question

大家好，在我的项目中，我有三个 js 文件，ma​​in.js、browser.js 和 inject.js，在 browser.js 我已经实现了所有与我的 webview 相关的点击操作和许多功能，从这里我有一个点击操作来从加载到 webview 的网页中获取用户名，为此我在 中创建了一个函数>inject.js 从页面获取内容和元素 我在 Inject.js 文件中得到了值，但在 Browser.js 文件中我得到了未定义的值

这里是我的示例代码:

browser.js

var proName = webview.executeJavaScript('__myInjection.profileName()');

inject.js

profileName : function (){
var recordArray = []
var url
var script = document.createElement("script");
script.src = require('./jquery-3.2.1.min.js');

  $(document).ready(function() {
 url = $("[data-control-name='identity_profile_photo']").attr("href");
alert(url)
  });

return url;


},

值在 inject.js 中被调用，但 browser.js 返回未定义值

Answer 1

不确定为什么要将 JS 代码注入(inject) WebView，但为什么不……确保它不是 XY problem .

1. webview.executeJavascript() 方法不返回任何东西。您可以将 回调 作为第三个参数传递(更多内容见下文)，但我认为它不会从已执行的代码中接收到任何信息。

2. 在您注入(inject)的代码中，您创建了一个将在页面准备就绪时执行的回调。因此，您的函数返回的任何内容(如您的 url 变量)都不会受到回调代码的影响。确保你理解How to return the response from an asynchronous call?

如果我理解正确的话，您正试图在您的嵌入式页面上抓取一些数据，并将其发送回您的渲染器(浏览器)。

获得此结果的更合适方法是使用 preload Electron 属性<webview> :

<webview src="urlToGuestPage" preload="./inject.js"></webview>

在inject.js , 你可以 require(electron) , 并使用 Electron IPC 方案 ( electron.ipcRenderer ) 在 Webview 之间进行通信( ipcRendrer.sendToHost() ) 和“父”渲染器。你有一个简单的例子:https://electron.atom.io/docs/api/webview-tag/#event-ipc-message

// In embedder page. (parent Renderer / browser.js)
const webview = document.querySelector('webview')
webview.addEventListener('ipc-message', (event) => {
  console.log(event.channel)
  // Prints "pong"
})
webview.send('ping')

// In guest page. (preload script for the webview / inject.js)
const {ipcRenderer} = require('electron')
ipcRenderer.on('ping', () => {
  ipcRenderer.sendToHost('pong')
})

您应该能够找到更详细的教程，了解渲染器和 WebView 之间的此类通信，例如https://ourcodeworld.com/articles/read/201/how-to-send-retrieve-information-and-manipulate-the-dom-from-a-webview-with-electron-framework