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イベントを利用してみてください。