Tutorialチュートリアル
新しい画面をポップアップ表示するには
<a href="https://www.google.co.jp/?launch_webview=yes">リンクを別のWebViewで開く</a>
解説
新しいページを開く際、パラメータにlaunch_webview=yesを付けてください。
上記の例はインターネット上のWebページですが、ローカルファイルも表示可能です。
※さらに新しいWebViewを開くことは出来ません。
※新しく開いたWebView上でもapplican.jsの機能を使用することができます。
■JavaScriptから新たにWebViewを開く機能
location.href = "index.html?launch_webview=yes#login";
解説
新しいページを開く際、パラメータにlaunch_webview=yesを付けてください。
上記の例はインターネット上のWebページですが、ローカルファイルも表示可能です。
※さらに新しいWebViewを開くことは出来ません。
※新しく開いたWebView上でもapplican.jsの機能を使用することができます。
■ポップアップ表示するWebViewにツールバーを表示しない方法
<a href="https://www.google.co.jp/?launch_webview=yes_without_toolbar">リンクを別のWebViewで開く</a>
解説
パラメータ指定を「launch_webview=yes_without_toolbar」とすることでツールバーを非表示にしたポップアップ表示ができます。
■ポップアップ表示をWeb側から閉じる方法
リンク指定の場合
<a href="?close_webview=yes">閉じる</a>
JavaScriptの場合
location.href = "?close_webview=yes";
解説
リンク指定を「?close_webview=yes」とすることでポップアップを閉じることができます。
■ポップアップ表示したWebViewが閉じられたことを検知する機能
ポップアップ表示されたWebViewが閉じられたことを検知するにはポップアップ表示する前にJavascriptでイベントリスナーを登録します。
applican.addLaunchWebviewCloseEventListener(myCallback); function myCallback(){ //WebViewが閉じられたことを検知。 }
解説
WebViewが閉じられた際に、登録したコールバック関数が実行されます。
※パラメータ指定「launch_webview」でないと閉じられたことを検知しません。
■WebViewを表示する際のアニメーションを指定する方法(iOSのみ)
URLのパラメータを追加することでアニメーションを指定することができます。
transition_style=[アニメーション形式]
サンプルコード
<a href="page2.html?launch_webview=yes&transition_style=flip">回転して開く</a>
transition_styleで指定できるパラメータ
パラメータ | 説明 |
---|---|
cover | 下から上にスライドします。デフォルトです。 |
flip | 回転して表示します。 |
curl | ページをめくり上げるように表示します。 |
cross | フェードインフェードアウトで表示します。 |
■ツールバーを画面上部に表示させる方法
<a href="https://www.google.co.jp/?launch_webview=top">リンクを別のWebViewで開く(ツールバー画面上部)</a>
解説
パラメータ指定を「launch_webview=top」とすることでツールバーを画面上部に表示できます。
■WebViewを別タブで表示する方法
<a href="https://www.google.co.jp/?launch_tab=yes">リンクを別のWebViewで開く(launch_tab)</a>
解説
※パラメータ指定「launch_webview」によりポップアップ表示した場合のみ検知します。
■ブラウザアプリで表示させる方法
<a href="https://www.google.co.jp/?launch_browser=yes">リンクを別のWebViewで開く(launch_browser)</a>
解説
OS標準のブラウザアプリで表示できます。
■ChromeViewで表示させる方法(Androidのみ)
<a href="https://www.google.co.jp/?launch_chrome_tab=yes">リンクを別のChromeViewで開く(launch_chrome_tab)</a>
解説
パラメータ指定を「launch_chrome_tab=yes」とすることでChromeViewで表示ができます。
※iOSでは「■WebViewを別タブで表示する方法」と同じ挙動になります。