Electron : webviewと非同期通信する

2018年06月28日
development

Electronのrenderer processとwebview間でメッセージのやり取りをする。ここでいうrenderer processは、main process内でBrowserWindowのloadUrlで読み込んだhtmlファイルで実行されているjavascriptを指す。 Electronのアーキテクチャに関しては以下のドキュメントが詳しい。

https://electronjs.org/docs/tutorial/application-architecture
https://qiita.com/tkhr/items/f3825c42ad045cda00b9

この方式を取ると、webview内のdocumentオブジェクトにアクセスし、その結果をrenderer processに返すといったことが可能になる。 webview内のHTMLを解析してrenderer processに渡したいときに使える。サンプルコードは以下の通り。

index.html

<webview preload="inject.js" src="https://electron.atom.io/"></webview>
<button onclick="send();">Send</button>

<script>
  const webview = document.querySelector('webview')

  webview.addEventListener('ipc-message', (event) => {
    // webviewからのメッセージを受け取る
    console.log(event.channel)
  })

  function send() {
    // webviewにメッセージを送る
    webview.send('ping')
  }
</script>

inject.js

"use strict";

const {ipcRenderer} = require('electron')
ipcRenderer.on('ping', () => {
  var result = {};
  result.foo = 'bar';
  // JSONを文字列としてrenderer processに送信する
  ipcRenderer.sendToHost(JSON.stringify(result))
})

Electron

Electron : webviewと非同期通信する

目次

Search

Recent Posts