外部リンクを表示する「monaca.invokeBrowser」は廃止

monacaのバージョンアップに伴い、外部リンクの表示方法が変更されました。 以前からmonacaを使用してい方は、monaca.invokeBrowserで外部リンクを表示できなくて困惑してしまうので注意が必要です。

今までの外部リンクの表示方法

以前までの monaca の表示方法はmonaca.invokeBrowser("http://~~~~");という具合でした。

そもそも何故、外部リンクを普通の aタグで記述せずに、こういう書き方をするかといえば、 ハイブリッドアプリという性質上、アプリの webView に html を表示してアプリの画面として表示させているので、 「外部のリンク先サイトもアプリの画面として表示してしまう」という問題が発生してしまうためです。

そのため、外部リンクを表示する時には「これは外部リンクですよー」とアプリに伝えるために、固有の書き方が必要でした。それが monaca.invokeBrowser() です。

外部リンク表示は「Inappbrowser」に変更

monaca のバージョンアップに伴い、「invokeBrowser」は「Inappbrowser」に変更になりました。

とはいえ、今までのようにmonaca.inAppBrowser();と書けばよいというわけではありません。

新たな外部リンクを開く記述は、window.open(url, target, options);こういう書き方に変わりました。

target や option の設定が増えましたが、ただ外部リンクで開きたいだけであれば、window.open('http://~~~');とだけ書けばよいでしょう。

targetで指定することで変わる挙動は、3通りです。

target: URL の読み込み先として使用するブラウザーの種別。任意のパラメータです。デフォルトでは、 _self となります。 _self: URL がホワイトリストに載っている場合には、 Cordova WebView で開きます。それ以外の場合には、 InAppBrowser で開きます。 _blank: InAppBrowser で開きます。 _system: システムの Web ブラウザーで開きます。

'_self' は、ホワイトリストに登録していれば、webViewにそのまま開くため、アプリ画面として開かれます。 '_blank' は、inAppBrowserで開くため、アプリ内の専用のブラウザが立ち上がります。 '_system' は、他のウェブブラウザで開くため、スマートフォンに入っているブラウザアプリで表示されます。 option についても、公式のドキュメントに詳細がありますので、そちらを参照してください。

https://docs.monaca.io/ja/reference/cordova_6.2/inappbrowser/

因みに、inAppBrowserはプラグインなので、monacaのcordovaプラグインからinAppBrowserを有効にしておく必要がありますのでご注意ください。

人気記事すべて表示

ハイブリッドアプリすべて表示