Electronでwebviweを使用している時に、webviweの中に表示されている値を取得したかったがどうすればいいのか分からなかった。 調べてみたら結構面倒だったのでメモしておく。
サンプルとしてyahooの赤枠で囲った部分の値を取得する。
手順は以下の通り
1. index.htmlのwebviewタグのpreload要素にてwebview内の値を取得するjavascriptを追加。取得した値はipcモジュール使用して連携する。
2. 1にて連携された値を取得する為に、webviewのaddEventListenerにipcイベントが発生した際の処理を追加する。
ソースは以下の通り
index.html
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>test</title> </head> <body> <webview id="mainWebView" src="http://yahoo.co.jp/" preload="./get.js"></webview> <style> webview { position: absolute; top: 0; right: 0; bottom: 0; left: 0; } </style> <script> onload = function(){ var webview = document.getElementById("mainWebView"); // webviewにてipcイベントが行われた際に起動 webview.addEventListener("ipc-message",function(event){ //event.argsに値が格納される alert(event.args[0]); }); } </script> </body> </html>
get.js(webviewタグのpreload要素に追加する内容)
onload = function(){ // 値を取得 var word = document.querySelector("#pblocal > h3").innerHTML; // ipcにて値を連携 var ipcRenderer = require('electron').ipcRenderer; ipcRenderer.sendToHost('pong',word); }
処理結果
取れた―
