2
4

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

InAppBrowserのmessageイベントを使ってみる

Posted at

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形式のオブジェクトになります。オブジェクトには、typedata の値が含まれています。

メッセージを受信した際のtypeの値は、message になります。送信されたデータは、dataに含まれています。params.data.my_message で、送信されたデータを取得することができます。

おわりに

InAppBrowserで表示している外部サイトから直接cordovaの機能を呼び出す事はできませんが、このmessageイベントを使用する事で、メッセージ受信後にアプリ側でCordovaプラグイン等のCordovaの機能を呼び出すことができます。

このmessageイベントは、InAppBrowserで表示している外部サイトとアプリを繋ぐ便利なイベントです。一度、messageイベントを利用してみてください。

2
4
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2
4

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?