はじめに
Cordova Android で iframe 内のリンクをシステムデフォルトブラウザで開く方法。
前置きなどは 親 Window で iframe からのデータ受信、イベント検出する方法 の「前置き」と同じ。
以下はとあるプロジェクトの要件など。
- Cordova で iOS/Android まとめて開発
- コンテンツ内部は先方が作成
- コンテンツ内に先方管理外のサイトへのリンクがある
- ガワはこちらで作成して、コンテンツを
iframe
で読み込むiframe
内のリンクをシステムデフォルトブラウザで開きたいiOS は問題なかった(意図通りに動作した)が、Android だけ上手く動かなかった。具体的には、リンクをタップすると
iframe
内で開こうとするが、X-Frame-Options の設定によりnet::ERR_BLOCKED_BY_RESPONSE
となる、というもの。
TL;DR
iframe
側:postMessage
でリンク先 URL を送信- 送信後
preventDefault
で元イベント(リンク先をiframe
内で開こうとするアクション)を抑止
- 送信後
- アプリ(Cordova App)側: apache/cordova-plugin-inappbrowser でシステムデフォルトのブラウザを呼び出す
- 他ページで余計な動作をしないように注意
- 今回は Vue なので
created
,beforeDestroy
フックでイベントリスナを 追加/削除
- 今回は Vue なので