如何从电子中的 webview.executeJavaScript 获取 return 值

how to get return value from webview.executeJavaScript in electron

大家好,在我的项目中,我有三个 js 文件,main.jsbrowser.jsinject.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 returns 未定义

不确定为什么要将 JS 代码注入 WebView,但为什么不……确保它不是 XY problem

  1. webview.executeJavascript() 方法没有 return 任何东西。您可以将 callback 作为第三个参数传递(更多内容见下文),但我认为它不会从执行的代码中收到任何内容。

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

如果我没理解错的话,你是想在你的嵌入式页面上抓取一些数据,然后将它发送回你的渲染器(浏览器)。

实现此结果的更合适的方法是使用 electron <webview>:

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

inject.js中可以require(electron),使用electron IPC方案(electron.ipcRenderer)与Webview(ipcRendrer.sendToHost()) and the "parent" Renderer. You have a simple example there: 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')
})

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