Tutorial

新しい画面をポップアップ表示するには

HTMLコンテンツ上のAタグより新しい画面をポップアップ表示が可能です。
現在のページから新たにWebViewを開くことが出来ます。

<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を別タブで表示する方法」と同じ挙動になります。

会員登録(無料)はこちらから