概要
PhoneGap/Cordovaアプリで外部サイトへリンクしたときの挙動が、どこかのバージョンから変わったため、現バージョンでの挙動メモです。
環境
Cordova 7.0.1
記事が古めですが、この記事で構築した環境を使っています。
※ ずっとPhoneGap環境をつかっていたのですが、最新版で phonegap create が失敗することがあるので、Cordova に乗り換えました。
検証マシン
Sony Xperia Z5 Premium (Android7.0)
iPhone6Plus (iOS )
Androidの挙動
デフォルト=標準のブラウザ（Chrome）で開く
<a href="https://www.google.co.jp/">LINK</a>
単に外部URLリンクをを書くだけだと、Chromeに切り替わってページが表示されます。
アプリ内ブラウザで開くようにする
cordova plugin add cordova-inappbrowser
プラグイン「InAPpBrowser」をインストール
<a hred="#" onclick="window.open('https://www.google.co.jp/', '_blank', 'location=yes')">LINK</a>
window.openで_blank指定すると、アプリ内ブラウザで開きます。
（しかし・・・このUIのダサさはどうにかならないものか…）
【注意】
cordova create で生成される初期テンプレに以下のmetaタグが入っています。
この１行を削除しないと JavaScriptが利きません。これにハマって、この記事書くのいったんやめかけました...
<meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *; img-src 'self' data: content:;">
アプリ内部で表示するようにします。
かつではこの挙動がデフォルトだったのですが、どのバージョンからか、ホワイトリストに記載する形式に変わりました。
プラグインが必要ですが、Cordovaの初期テンプレに最初から入っています。
<allow-navigation href="https://www.google.co.jp/*" />
config.xml にアプリ内表示を許可するアドレスを記載します。
<a href="https://www.google.co.jp/">LINK</a>
リンクは、素の a タグでOKです。
これで、Webサーバー上のページと意識されず、アプリ内部でページが表示されます。
なお、ホワイトリストで指定したURL以外は表示できないため、Googleの検索から別サイトに飛ぼうとするような場合は、別URLになった瞬間に、標準のブラウザ（Chrome）が開きます。
参考
https://cordova.apache.org/docs/en/latest/reference/cordova-plugin-whitelist/
iOSの挙動
標準のブラウザが Safari に変わるだけで、挙動は同じです。
気が向いたら、キャプチャ追記します。。。