Electron : webviewと非同期通信する
スポンサードリンク
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))
})
Search
Recent Posts
- OpenSSHのエラー「bad ownership or modes for chroot directory component」の原因と解消方法
- Apacheの起動状態をチェックして停止してる場合にApacheを起動するシェルスクリプト
- Amazon LinuxのOSバージョンを調べる方法|/etc/redhat-release の代替ファイル
- MYSQLでダンプファイルを取得する際に発生したエラー「Couldn't execute 'SELECT BINLOG_GTID_POS('', '0')': You are not using binary logging (1381)」の原因と対処方法
- RHEL系Linuxでリポジトリを一覧表示するコマンド(dnf repolist)