如何從電子中的webview.executeJavaScript獲取返回值

Question

嗨，在我的項目中，我有三個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返回未定義的值

Answer 1

不完全確定為什么要將JS代碼注入WebView，但為什么不...確保它不是XY問題 。

1. webview.executeJavascript()方法不返回任何內容。 您可以將回調作為第三個參數傳遞（下面有更多內容），但我認為它不會從執行的代碼中收到任何內容。

2. 在您注入的代碼中，您將創建一個將在頁面就緒時執行的回調。 因此，函數返回的任何內容（如url變量）都不會受到回調代碼的影響。 確保您了解如何從異步調用返回響應？

如果我理解正確，您將嘗試廢棄嵌入頁面上的某些數據，並將其發送回渲染器（瀏覽器）。

實現此結果的更合適的方法是使用electron <webview>的preload屬性：

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

在inject.js ，您可以require(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')
})

您應該能夠在渲染器和Web視圖之間找到更詳細的此類通信教程，例如https://ourcodeworld.com/articles/read/201/how-to-send-retrieve-information-and-manipulate-the- DOM-從-A-網頁視圖的與電子的框架