質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.48%
Cordova

Cordovaは様々なデバイスで使うことができるオープンソースなモバイル用開発プラットフォームです。開発者に各デバイスの元のプラットフォームで開発する必要をなくし、HTML・JavaScript・CSSなどの一般的なウェブのテクノロジーを使ってすべてのデバイスで展開することができるモバイルのアプリケーションを生成することを可能にします。

Monaca

「Monaca」はiOS、Android、Windows向けのアプリ開発に対応した、Cordovaベースのモバイルアプリ開発プラットフォームです。HTML5、JavaScriptといったWeb標準技術を用いてモバイルアプリ開発を行うことができます。

Q&A

0回答

1658閲覧

InAppBrowserのmessageイベントについて

m_u

総合スコア2

Cordova

Cordovaは様々なデバイスで使うことができるオープンソースなモバイル用開発プラットフォームです。開発者に各デバイスの元のプラットフォームで開発する必要をなくし、HTML・JavaScript・CSSなどの一般的なウェブのテクノロジーを使ってすべてのデバイスで展開することができるモバイルのアプリケーションを生成することを可能にします。

Monaca

「Monaca」はiOS、Android、Windows向けのアプリ開発に対応した、Cordovaベースのモバイルアプリ開発プラットフォームです。HTML5、JavaScriptといったWeb標準技術を用いてモバイルアプリ開発を行うことができます。

0グッド

0クリップ

投稿2021/10/18 09:17

いつもお世話になっております。

前提・実現したいこと

monacaでInAppBrowserを使用しWebサイトを表示するアプリを制作しています。
InAppBrowserで表示したwebサイトからmessageイベントで値を受け取りmonaca側で処理したあとweb側に値を返す処理を作りたいと考えています。
わざわざアプリ側で処理するのはmonacaの別のプラグインを使用するためなので、Web側で完結させることはできません。

発生している問題

下記を参考にmessageイベントでweb側からアプリ側へ値を渡し受けとる処理を作ることができました。
https://ja.docs.monaca.io/reference/core-cordova-plugins/cordova_10.0/inappbrowser
https://qiita.com/keeey/items/4076addc9f32058a47d8

しかしWeb側から受け取った後、アプリ側からWeb側に値を返す方法がドキュメントにも記載がなくわかりません。

試したこと

iframeなどですとevent.source.postMessage()のようにsourceプロパティを使用することで、呼び出し元と再度通信することができると思います。
しかしInAppBrowserで試したところCannot read properties of undefined (reading 'postMessage')になりました。

Webからアプリを呼び出す時に使うwebkit.messageHandlers.cordova_iab.postMessage()も試しましたが同様のエラーになりました。

javascript

1inAppBrowserRef = cordova.InAppBrowser.open(url, '_blank', plugin_option); 2inAppBrowserRef.addEventListener('message', function(e){ 3 ~~受け取った値を処理~~ 4 e.source.postMessage("ok","*"); //→Cannot read properties of undefined (reading 'postMessage'); 5 webkit.messageHandlers.cordova_iab.postMessage("ok") //→Cannot read properties of undefined (reading 'messageHandlers') 6)};

アプリ側からWeb側に送る処理、アプリ側からWeb側で受け取るための処理をどのように記述するかご教示いただけないでしょうか。
方法を調べる中でInAppBrowserのmessageイベントは双方向性がないというような記述を見かけた気がするので、そもそも方法がないのかもしれませんが…。

補足情報(FW/ツールのバージョンなど)

Cordova 10.0
InAppBrowser 5.0.0

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問