4
7

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

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

Posted at

#概要
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 に変わるだけで、挙動は同じです。
気が向いたら、キャプチャ追記します。。。

4
7
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
4
7

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?