Cordovaのプラグインinappbrowserのmessageイベントのやり方


Cordovaのプラグインinappbrowserでwebviewアプリを作成した時にinappbrowser内のリンクを端末の標準ブラウザで開く方法にもの凄く苦戦したのでやり方を残します。

■ 構築環境

・Cordova9.0.0
・inappbrowser3.1.0

■ メッセージを送る側(inappbrowser内)

var value = 'value';

var messageObj = {hoge: value};

var stringifiedMessageObj = JSON.stringify(messageObj);

window.webkit.messageHandlers.cordova_iab.postMessage(stringifiedMessageObj);

■ メッセージを受け取る側(アプリ内)

受け取る側での変数の参照の仕方ですが今回は送る側で hoge という名前で送信したので
参照する時は event.data.hoge です。

var hoge = cordova.InAppBrowser.open('url', '_blank');
hoge.addEventListener('message', function(event) {
    // ここに処理を書く
    console.log(event.data.hoge);
});

■ 注意点

inappbrowserのversionのみです!versionは 3.1.0 以上でないと動きません。自分はこのやり方をすぐに見つけたのにversionのせいだと気付かず色々なやり方を試していました。cordovaはたまにプラグインのversionを変えた時によくわからないバグが発生するのでその時は新しいプロジェクトからやると楽です。