2014年8月8日金曜日

PhoneGap 3.5 で InAppBrowser が動かない場合

PhoneGap 3.5 で外部サイトを開くときに、
InAppBrowser というプラグインを使用すると便利です。

JavaScript からアプリ内で Web ページを開いたり、
スマートフォンの Web ブラウザを起動して Web ページを開くことができます。
// アプリ内で Web ページを開く
window.open('http://google.co.jp/', '_blank');

// Web ブラウザを起動して Web ページを開く
window.open('http://google.co.jp/', '_system');

InAppBrowser では、
アプリ内で Web サイトを開いた際に「閉じる」ボタンを表示することで、
元の画面に戻ってくることができます。
閉じるボタンが出ない場合は InAppBrowser が有効になっていないので注意が必要です。

以下の3点を確認する必要があります。

1.プラグインがインストールされている
$ phonegap plugin list
のコマンドでインストールされているプラグイン一覧を確認できます。
InAppBrowser がこの中に入っていなければなりません。
インストールは
$ phonegap plugin add https://github.com/apache/cordova-plugin-inappbrowser.git
のように行います。

2.cordova.js をロードしている
<script src="cordova.js"></script>
HTML 内で上記のスクリプト読込が必要です。
これをロードしないと「閉じるボタン」が表示されないデフォルトの画面遷移になります。
www/ ディレクトリ内には存在しないのですが、
各種プラットフォーム向けにビルドした際に生成されます。
ドキュメントにも見当たらなかったので詰まりました。

3.window.open() を使用している
<a> 要素でも同じことができるという記述を見かけたのですが、
PhoneGap 3.5 で試してみたところ window.open() を呼び出さないと動きませんでした。
上のコードのように window.open() を JavaScript から呼び出すと無事表示されました。

2 件のコメント:

  1. おかげさまで解決に至りました。全く同じ症状で悩んでいたので助かりました。2は気が付けなかったです。

    返信削除
    返信
    1. このコメントは投稿者によって削除されました。

      削除