如何从电子中的 webview.executeJavaScript 获取 return 值
how to get return value from webview.executeJavaScript in electron
大家好,在我的项目中,我有三个 js 文件,main.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 returns 未定义 值
不确定为什么要将 JS 代码注入 WebView,但为什么不……确保它不是 XY problem。
webview.executeJavascript()
方法没有 return 任何东西。您可以将 callback 作为第三个参数传递(更多内容见下文),但我认为它不会从执行的代码中收到任何内容。
在您注入的代码中,您创建了一个将在页面准备就绪时执行的回调。因此,您的函数 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
大家好,在我的项目中,我有三个 js 文件,main.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 returns 未定义 值
不确定为什么要将 JS 代码注入 WebView,但为什么不……确保它不是 XY problem。
webview.executeJavascript()
方法没有 return 任何东西。您可以将 callback 作为第三个参数传递(更多内容见下文),但我认为它不会从执行的代码中收到任何内容。在您注入的代码中,您创建了一个将在页面准备就绪时执行的回调。因此,您的函数 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