InAppBrowser プラグイン
最終更新
役に立ちましたか?
最終更新
役に立ちましたか?
テスト環境 ( バージョン番号 ) :
このプラグインでは、cordova.InAppBrowser.open()
を使用して、InAppBrowser ウィンドウ ( InAppBrowser 提供の Web ブラウザー ) を開きます。
cordova.InAppBrowser.open()
関数は、window.open()
関数を代替する関数です。次の記述をすれば、既存の window.open()
を使用して、InAppBrowser ウィンドウを開くことができます。
InAppBrowser を使用して開いたウィンドウ ( InAppBrowser ウィンドウ ) は、標準の Web ブラウザーと同じ動作をします。ただし、Cordova API へのアクセスはできません。使用方法としては、提供元不明のコンテンツを読み込む場合に、Cordova WebView の代わりに、InAppBrowser を使用するなどが考えられます。なお、InAppBrowser には、ホワイトリストは適用されません。また、system browser ( システムブラウザー ) 上で、リンクを開くこともありません。[ 翻訳者メモ : system browser は、OS 標準のブラウザーを指しているものと思われます ( 他の選択肢としては、Android のシステムブラウザーがありました )。また、原文では、「 system's web browser 」、または、「 system browser 」 などと異なる言葉が使用されていますが、どちらもシステム標準のブラウザーを指しているものと思われます。なお、翻訳文では、前者は、「 システム標準の Web ブラウザー 」、後者は、「 system browser 」 ( 原文のまま ) としています。]
InAppBrowser では、ユーザー用の独自の GUI ( 戻る・進む・中止 ) を、デフォルトで提供しています。
後方互換性を維持するため、このプラグインでは、window.open
をフック ( hook ) しています。ただし、window.open
にこのようなフックを使用すると、想定外の副作用がでる場合もあります ( 特に、別のプラグインとの間に依存関係がある場合など )。window.open
へのフックは、将来的には廃止される予定ですが、それまでは、次のようにして、手動でも、デフォルトの挙動に戻すことができます。
window.open
は、グローバルスコープに属していますが、InAppBrowser が使用できるのは、deviceready
イベントの発火後になります。
InAppBrowser
の新規インスタンス内、現在開いているブラウザーのインスタンス内、または、system browser ( システムブラウザー ) 内で、URL を開きます。
ref: ターゲットが 、'_blank'
に設定されているときのInAppBrowser
ウィンドウへのリファレンス。 (InAppBrowser)
url: 読み込みをする URL。Unicode 文字が URLに含まれる場合、encodeURI()
を使用して変換します。 (String)
target: URL の読み込み先として使用するブラウザーの種別。任意のパラメーターです。デフォルトは、_self
となります。 (String)
_self
: ホワイトリストに対象の URL が登録されている場合には、Cordova WebView を開きます。それ以外の場合には、InAppBrowser
を開きます。
_blank
: InAppBrowser
を開きます。
_system
: システム標準の Web ブラウザー ( system's web browser ) を開きます。
options: InAppBrowser
で使用する、任意のオプションです。デフォルトは、location=yes
となります。 (String) options
で使用する文字列に、空白は使用できません。また、各設定 ( 名前と値の組み合わせ ) の間を、コンマで区切る必要があります。各設定の名前では、大文字・小文字を区別しません。
すべてのプラットフォームは、以下の値をサポートしています。
location: yes
または no
を設定すると、InAppBrowser
のロケーションバーを、それぞれ、表示または非表示にできます。
Android 専用 :
hidden: yes
に設定した場合、ブラウザーの 「 作成 」 とページの読み込みを行いますが、表示はしません。読み込みが完了すると、loadstop イベントが発火します。省略または no
( デフォルト ) に設定した場合、通常通り、ブラウザーを開き、読み込みを行います。
beforeload: beforeload イベントを有効にして、ブラウザに実際にロードされるページを変更するように設定します。受け入れられる値は、GET リクエストのみをインターセプトする、POST リクエストでインターセプトする、または GET と POST リクエストの両方をインターセプトする yes
です。POST リクエストは、現在サポートされておらず、無視されることに注意してください( beforeload=post
を設定すると、エラーが発生します )。
clearcache: yes
に設定した場合、新規のウィンドウを開く前に、ブラウザーの cookie を削除します。
clearsessioncache: yes
に設定した場合、新規のウィンドウを開く前に、セッションの cookie を削除します。
closebuttoncaption: [X] の代わりに閉じるボタンのキャプションとして使用する文字列を設定します。この値は、自分でローカライズする必要があることに注意してください。
closebuttoncolor: 有効な 16 進色文字列に設定します。( 例:#00ff00 )。テキストまたはデフォルトの [X] に関係なく、閉じるボタンの色をデフォルトから変更します。この設定は、location を yes
に設定している場合にのみ有効です。
footer: yes
に設定した場合、フッターに閉じるボタンが iOS の完了ボタンと同様に表示されます。 閉じるボタンはヘッダーと同じように表示されるため、closebuttoncaption と closebuttoncolor を使用してプロパティを設定します。
footercolor: #00ff00 または #CC00ff00(#aarrggbb)などの有効な 16 進数の色の文字列に設定した場合、フッターの色がデフォルトから変更されます。 この設定は、footer を yes
に設定している場合にのみ効果があります。
hardwareback: yes
に設定した場合、ハードウェア標準の 「 戻る 」 ボタンを使用して、前のページに戻ります ( InAppBrowser に記録されているページ遷移の履歴を使用 )。「 前のページ 」 が存在しない場合には、InAppBrowser が閉じます。デフォルト値は yes
です。「 戻る 」 ボタンを使用して、InAppBrowser を閉じたい場合には、no
に設定します。
hidenavigationbuttons: yes
に設定した場合、ロケーションツールバーのナビゲーションボタンが非表示になります。ユーザーがロケーションを yes
に設定している場合にのみ有効です。 デフォルト値は no
です。
hideurlbar: yes
に設定した場合、ロケーションツールバーの URL バーが非表示になります。ユーザーが location を yes
に設定した場合にのみ有効です。 デフォルト値は no
です。
navigationbuttoncolor: 有効な 16 進数の色文字列に設定します( 例:#00ff00 )。両方のナビゲーションボタンの色がデフォルトから変更されます。 この設定は、location を yes
に設定し、hidenavigationbuttons を yes
に設定していない場合にのみ効果があります。
toolbarcolor: 有効な 16 進数の色文字列に設定します( 例:#00ff00 )。これにより、ツールバーの色がデフォルトから変更されます。 ユーザーの この設定は、location が yes に設定されている場合にのみ有効です。
lefttoright: yes
に設定した場合、ナビゲーションボタンと閉じるボタンの位置が入れ替わります。 具体的には、ナビゲーションボタンは左に、閉じるボタンは右に移動します。
zoom: yes
に設定した場合、Android ブラウザーのズームコントロール ( 制御バー ) が表示されます。no
に設定した場合、非表示になります。デフォルト値は yes
です。
mediaPlaybackRequiresUserAction: yes
または no
に設定して、 HTML5 の audio または video の自動再生を、有効または無効にします ( デフォルトは no
)。
useWideViewPort: WebViewが、viewport
タグのサポートを有効にするか、wide viewport
を使用するかを設定します。設定の値が no
の場合、レイアウト幅は常に端末非依存(CSS)ピクセルの WebView コントロールの幅に設定されます。値が yes
で、ページに viewport タグが含まれている場合、タグで指定された幅の値が使用されます。ページにタグが含まれていないか、幅が指定されていない場合は、wide viewport が使用されます。( デフォルトは yes
です )。
fullscreen: InappBrowser WebView をフルスクリーンで表示するかどうかを設定します。フルスクリーンモードでは、ステータスバーは非表示になります。デフォルト値は yes
です。
iOS 専用 :
usewkwebview: InappBrowser に WKWebView エンジンを使用するには、yes
に設定します。 UIWebView を使用するには、省略するか、no
( デフォルト )に設定します。 注:usewkwebview=yes
を使用するには、WKWebView エンジンプラグインを Cordovaプロジェクトにインストールする必要があります( 例:cordova-plugin-wkwebview-engine または cordova-plugin-ionic-webview)。
hidden: yes
に設定した場合、ブラウザーの 「 作成 」 とページの読み込みを行いますが、表示はしません。読み込みが完了すると、loadstop イベントが発火します。省略または no
( デフォルト ) に設定した場合、通常通り、ブラウザーを開き、読み込みを行います。
beforeload: beforeload イベントを有効にして、ブラウザに実際にロードされるページを変更するように設定します。受け入れられる値は、GET リクエストのみをインターセプトする、POST リクエストでインターセプトする、または GET と POST リクエストの両方をインターセプトする yes
です。POST リクエストは、現在サポートされておらず、無視されることに注意してください( beforeload=post
を設定すると、エラーが発生します )。
clearcache: yes
に設定した場合、新規のウィンドウを開く前に、ブラウザーの cookie を削除します。
clearsessioncache: yes
に設定した場合、新規のウィンドウを開く前に、セッションの cookie を削除します。
cleardata: yes
に設定した場合、新しいウィンドウが開く前にブラウザのローカルストレージ全体( Cookie、HTML5 ローカルストレージ、IndexedDB など )がクリアされます。
closebuttoncolor: デフォルトの [完了] ボタンの色から変更するには、有効な 16 進数の色の文字列として設定します( 例:#00ff00 )。 ツールバーが無効になっていない場合にのみ適用されます。
closebuttoncaption: Done ボタンのラベルに使用する文字列を設定します。この値は、各自でローカライズする必要があります。
disallowoverscroll: yes
または no
に設定すると ( デフォルトで no
)、UIWebViewBounce プロパティを、それぞれ、オンまたはオフにします。
hidenavigationbuttons: yes
または no
に設定して、ツールバーのナビゲーションボタンをオンまたはオフにします( デフォルトは no
)。 ツールバーが無効になっていない場合にのみ適用されます。
navigationbuttoncolor: デフォルトの色から変更するには、有効な 16 進数の色文字列として設定します( 例:#00ff00 )。ナビゲーションボタンが表示されている場合にのみ適用されます。
toolbar: yes
または no
に設定した場合、InAppBrowser
のツールバーを、それぞれ、表示または非表示にします ( デフォルトは yes
)。
toolbarcolor: ツールバーのデフォルトの色から変更するには、有効な 16 進数の色文字列として設定します( 例:#00ff00 )。ツールバーが無効になっていない場合にのみ適用されます。
toolbartranslucent: yes
または no
に設定した場合、ツールバーが半透明( 半透明 )になります( デフォルトは yes
)。 ツールバーが無効になっていない場合にのみ適用されます。
lefttoright: yes
に設定した場合、ナビゲーションボタンと閉じるボタンの位置が入れ替わります。 具体的には、閉じるボタンは右側に、ナビゲーションボタンは左側に移動します。
enableViewportScale: meta タグを使用した、ビューポート ( viewport ) の尺度変更を、有効 ( yes
) または無効 ( no
) にします ( デフォルトは no
)。
mediaPlaybackRequiresUserAction: yes
または no
に設定して、 HTML5 の audio または video の自動再生を、有効または無効にします (デフォルトは no
)。
allowInlineMediaPlayback: yes
または no
に設定して、端末標準のメディア再生用インターフェイスではなく、ブラウザーウィンドウ内でのインライン再生を許可するか設定します。HTML の video
要素には webkit-playsinline
属性を指定する必要があります ( デフォルトは no
)。
keyboardDisplayRequiresUserAction: JavaScript の focus()
を使用して、form 要素がフォーカスされたとき、キーボードを表示するかを、yes
または no
で設定します ( デフォルトは yes
)。
suppressesIncrementalRendering: レンダリング処理の開始時期を設定します。表示するコンテンツをすべて受け取った後に行うのであれば yes
に設定します ( デフォルトは no
)。
presentationstyle: presentation styleを設定する場合は、pagesheet
、formsheet
、fullscreen
のいずれかを設定します (デフォルトは fullscreen
)。
transitionstyle: transition style を設定する場合は、fliphorizontal
、crossdissolve
、coververtical
のいずれかを設定します ( デフォルトは coververtical
)。
toolbarposition: top
または bottom
に設定して、ツールバーの表示位置 ( ウィンドウの上・下 ) を指定します ( デフォルトは bottom
)。
hidespinner: ローディングインジケータの可視性を変更するには、yes
または no
に設定します( デフォルトは no
)。
Android
iOS
ターゲットが '_blank'
に設定されているときに cordova.InAppBrowser.open
の呼び出しから返されたオブジェクトです。
addEventListener
removeEventListener
close
show
hide
executeScript
insertCSS
InAppBrowser
からイベントリスナーを登録します。 ( ターゲットが '_blank'
に設定されている場合のみ使用可能 )
ref: InAppBrowser
ウィンドウへのリファレンス (InAppBrowser)
eventname: リスナーを設定するイベント (String)
loadstart: InAppBrowser
が URLの読み込みを始めたときに発火するイベント
loadstop: InAppBrowser
が URLの読み込みを終えたときに発火するイベント
loaderror: URL の読み込み時に、InAppBrowser
がエラーを検出したときに発火するイベント
exit: InAppBrowser
ウィンドウを閉じるときに発火するイベント
beforeload: InAppBrowser が URL をロードするかどうかを決定するとき発火するイベント( オプション beforeloadが 設定されている場合のみ)。
message: InAppBrowser Webview 内にロードされたページから投稿されたメッセージを InAppBrowser が受信した時に発火するイベント。
callback: イベントが発火したときに実行される関数。InAppBrowserEvent
オブジェクトを、パラメーターとして、この関数に渡します。
type: eventname ( イベント名)。loadstart
、loadstop
、loaderror
、message
、exit
のいずれかとなります。 (String)
url: 読み込んだ URL (String)
code: エラーコード ( loaderror
が発生した場合のみ ) (Number)
message: エラーメッセージ ( loaderror
が発生した場合のみ )(String)
data: メッセージの内容。( message イベントの場合のみ ) 。 文字列化されたJSONオブジェクト。(String)
Android
iOS
InAppBrowser
からイベントリスナーを削除します。 ( ターゲットが '_blank'
に設定されている場合のみ使用可能 )
ref: InAppBrowser
ウィンドウへのリファレンス (InAppBrowser)
eventname: リスナーの登録を解除するイベント (String)
loadstart: InAppBrowser
が URLの読み込みを始めたときに発火するイベント
loadstop: InAppBrowser
が URLの読み込みを終えたときに発火するイベント
loaderror: URL の読み込み時に、InAppBrowser
がエラーを検出したときに発火するイベント
exit: InAppBrowser
ウィンドウを閉じるときに発火するイベント
message: InAppBrowser Webview 内にロードされたページから投稿されたメッセージを InAppBrowser が受信した時に発火するイベント。
callback: イベントが発火したときに実行される関数。InAppBrowserEvent
オブジェクトを、この関数に渡します。
Android
iOS
InAppBrowser
ウィンドウを閉じます。
ref: InAppBrowser
ウィンドウへのリファレンス (InAppBrowser)
Android
iOS
非表示で実行されている InAppBrowser ウィンドウを表示します。 InAppBrowser ウィンドウ がすでに表示されている場合には、この関数を呼んでも効果ありません。
ref: InAppBrowser ウィンドウへのリファレンス (InAppBrowser)
Android
iOS
InAppBrowserウィンドウを非表示にします。 InAppBrowserがすでに非表示の場合、この呼び出しは無効です。
ref: InAppBrowser ウィンドウへのリファレンス (InAppBrowser)
Android
iOS
InAppBrowser
ウィンドウ上に、JacaScript コードをインジェクト ( inject/注入 ) します。(ターゲットが '_blank'
に設定されている場合のみ使用可能)
ref: InAppBrowser
ウィンドウへのリファレンス (InAppBrowser)
injectDetails: 実行するスクリプトの詳細。file
または code
キーを指定します。(Object)
file: インジェクトするスクリプトの URL
code: インジェクトするスクリプトのテキスト
callback: JavaScript コードのインジェクト後に実行する関数
インジェクトしたスクリプトの形式が code
の場合、callbackに、配列
形式のパラメーターが 1つ渡され実行されます。このパラメーターは、インジェクトしたスクリプトの実行結果( 戻り値 )です。複数行のスクリプトに関しては、最後のステートメント (statement ) の戻り値、または、最後に評価 ( evaluate ) した表現 (expression ) が、引き渡すパラメーターとなります。
Android
iOS
CSSを InAppBrowser
ウィンドウに挿入します。(ターゲットが '_blank'
に設定されている場合のみ使用可能)
ref: InAppBrowser
ウィンドウへのリファレンス (InAppBrowser)
injectDetails: 実行するスクリプトの詳細。file
または code
キーを指定します。 (Object)
file: インジェクトするスタイルシートの URL
code: インジェクトするスタイルシートのテキスト
callback: CSS のインジェクト後に実行する関数
Android
iOS
このプラグインを使用すると、アプリ内で役立つドキュメントページを表示できます。 オンラインヘルプドキュメントを表示し、アプリケーションを終了することなく閉じることができます。
以下は、これを行うためのサンプルです。
アプリでこれを行う方法はたくさんあります。 ドロップダウンリストは簡単な方法です。
ページの onDeviceReady
関数でユーザーの選択肢を収集し、適切な URL を共有ライブラリファイルのヘルパー関数に送信します。 ヘルパー関数は showHelp() です。次にその関数を記述します。
open
関数を使用してヘルプページを読み込みます。hidden プロパティを yes に設定しているため、ページコンテンツが読み込まれた後にのみブラウザを表示できます。 こうすることで、ユーザーはコンテンツが表示されるのを待つ間に空白のブラウザが表示されなくなります。 loadstop イベントが発生すると、コンテンツがいつロードされたかがわかります。 loadstop イベントを処理します。
ブラウザがすぐに表示されないため、loadstart イベントを使用して、状況メッセージ、進行状況バー、またはその他のインディケーターを表示できます。 これは、コンテンツが途中であることをユーザーに保証します。
loadstopcallback
イベントが発生すると、コンテンツがロードされたことがわかり、ブラウザを表示させることができます。 このような仕掛けは、より良いパフォーマンスの印象を作り出すことができます。 実は、コンテンツが読み込まれる前にブラウザを表示するかどうかにかかわらず、読み込み時間は同じです。
insertCSS
関数の呼び出しに気づいたかもしれません。これは、今回のサンプルの主な目的ではありませんが、この場合、ページのフォントサイズが一定のサイズになっていることを確認しています。この関数を使用して、任意の CSS スタイル要素を挿入できます。 プロジェクト内の CSS ファイルを指すこともできます。
場合によっては、ページがなくなったり、スクリプトエラーが発生したり、ユーザーにはリソースを表示する権限がありません。どのようにその状況を処理するかは、開発者側の設計に完全に依存します。ブラウザにそのメッセージを表示させるか、別の方法で提示することができます。
エラーをメッセージボックスに表示させたいと思います。 alert
関数を呼び出すスクリプトを注入することで、これを行うことができます。これは Windows デバイス上のブラウザでは機能しないため、executeScript コールバック関数のパラメータを調べて、有効かどうかを確認する必要があります。動作しない場合は、ページの <div>
にエラーメッセージが表示されます。
関連項目:
このプラグインを使用する場合には、Monaca クラウド IDE の [ Cordova プラグインの管理 ] 上で、InAppBrowser
プラグインをにします。
shouldPauseOnSuspend: InAppBrowser WebViewでのバックグラウンドオーディオを停止するためにアプリで一時停止/再開させるには yes
に設定します。( これは、 のような Google Play の問題を避けるために必要な場合があります。)