読者です 読者をやめる 読者になる 読者になる

エンジニアリングとお金の話

都内で働くエンジニアの日記です。投資と技術の話題がメインです。

【技術】Electronのwebviweタグに表示された値を取得する方法

技術

Electronでwebviweを使用している時に、webviweの中に表示されている値を取得したかったがどうすればいいのか分からなかった。 調べてみたら結構面倒だったのでメモしておく。

サンプルとしてyahooの赤枠で囲った部分の値を取得する。 f:id:hatakazu93:20160212192626p:plain 手順は以下の通り

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);
}

処理結果
f:id:hatakazu93:20160212194104p:plain

取れた―

広告を非表示にする