InAppBrowserのmessageイベントを使ってみる
cordova-plugin-inappbrowser v3.1.0から、message イベントが追加されています。詳しくは、InAppBrowser.addEventListener を参照してください。
このmessageイベントは、targetを _blank で実行した InAppBrowser で使用することができます。InAppBrowserで開いた外部サイトからメッセージを送信し、アプリ側がメッセージを受信すると、アプリ側に設定されているmessageイベントのコールバック関数が実行されます。
このmessageイベントを使用すると、外部サイトから送信されたメッセージ内容によって、アプリ側の処理を変更するということもできます。
messageイベントの使用例
アプリ側にInAppBrowserのmessageイベントを設定し、InAppBrowserで表示している外部サイトからメッセージを送信すると、アプリ側に設定されているmessageイベントのコールバック関数（messageCallBack）が実行される流れになります。
アプリ側の設定例
<body>
<input type="button" value="openInAppBrowser" onclick="openInAppBrowser()" />
</body>
<script>
function openInAppBrowser() {
var url = "外部サイトのURL";
var target = "_blank";
var options = "location=yes";
var inAppBrowserRef;
inAppBrowserRef = cordova.InAppBrowser.open(url, target, options);
inAppBrowserRef.addEventListener('message', messageCallBack);
}
function messageCallBack(params){
// メッセージ受信後にアプリ側で実行する処理
alert("message received (type): " + params.type);
alert("message received (data): " + params.data.my_message);
}
</script>
外部サイト側の設定例
<body>
<input type="button" value="sendMessage" onclick="sendMessage()" />
</body>
<script>
function sendMessage() {
var message = 'message event test';
var messageObj = { my_message: message };
var stringifiedMessageObj = JSON.stringify(messageObj);
webkit.messageHandlers.cordova_iab.postMessage(stringifiedMessageObj);
}
</script>
解説
送信するデータは、オブジェクトをJSON文字列に変換した値になります。上の例で言うと JSON.stringify(messageObj) になります。
アプリ側がコールバック関数で取得したデータ（params）は、JSON形式のオブジェクトになります。オブジェクトには、type と data の値が含まれています。
メッセージを受信した際のtypeの値は、message になります。送信されたデータは、dataに含まれています。params.data.my_message で、送信されたデータを取得することができます。
おわりに
InAppBrowserで表示している外部サイトから直接cordovaの機能を呼び出す事はできませんが、このmessageイベントを使用する事で、メッセージ受信後にアプリ側でCordovaプラグイン等のCordovaの機能を呼び出すことができます。
このmessageイベントは、InAppBrowserで表示している外部サイトとアプリを繋ぐ便利なイベントです。一度、messageイベントを利用してみてください。
Author And Source
この問題について(InAppBrowserのmessageイベントを使ってみる), 我々は、より多くの情報をここで見つけました https://qiita.com/keeey/items/4076addc9f32058a47d8著者帰属：元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .