HTML
JavaScript
PhoneGap
Cordova

PhoneGap/Cordovaでの外部サイトリンク 内部表示/アプリ内ブラウザ/標準のブラウザ

More than 1 year has passed since last update.

概要

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に切り替わってページが表示されます
Screenshot_20170811-192631.png

アプリ内ブラウザで開くようにする

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のダサさはどうにかならないものか…)
Screenshot_20170811-192647.png

【注意】
cordova create で生成される初期テンプレに以下のmetaタグが入っています。
この1行を削除しないと 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の初期テンプレに最初から入っています。

config.xml
<allow-navigation href="https://www.google.co.jp/*" />

config.xml にアプリ内表示を許可するアドレスを記載します。

<a href="https://www.google.co.jp/">LINK</a>

リンクは、素の a タグでOKです。
これで、Webサーバー上のページと意識されず、アプリ内部でページが表示されます
Screenshot_20170811-193756.png

なお、ホワイトリストで指定したURL以外は表示できないため、Googleの検索から別サイトに飛ぼうとするような場合は、別URLになった瞬間に、標準のブラウザ(Chrome)が開きます。

参考
https://cordova.apache.org/docs/en/latest/reference/cordova-plugin-whitelist/

iOSの挙動

標準のブラウザが Safari に変わるだけで、挙動は同じです。
気が向いたら、キャプチャ追記します。。。