[Cordova]外部サイトからローカルに戻る

Cordovaを使ったアプリで、起動時にローカルにあるindex.htmlを開くようにしています。

そこから外部サーバにあるページを開き、ページ内のボタンクリックなどの操作により、またローカルのindex.htmlを開きたいと思い調べました。

inappbrowserのプラグインを使う必要があるようです。

■cordova-plugin-inappbrowserについて
cordova-plugin-inappbrowser

You can show helpful articles, videos, and web resources inside of your app. Users can view web pages without leaving your app.

雑訳:ユーザーは、アプリを終了せずにWebページを表示できます。

■概要

  • InAppBrowserプラグインを追加
    $ cordova plugin add cordova-plugin-inappbrowser
  • 初期化時に、window.openでフックできるように設定
    ※バージョン7.0では、元のwindow.openもフックできるけど、将来的にはできなくなる模様

    document.addEventListener("deviceready", onDeviceReady, false);
    function onDeviceReady() {
    window.open = cordova.InAppBrowser.open;
    }
  • 処理
    var ref = cordova.InAppBrowser.open('http://192.168.xxx.xxx:xxxx’, '_blank', 'location=yes');
    ref.addEventListener('loadstop', function(e) {
    if (e.url.search(/about:blank/) > -1) {
        ref.close();
    } else {
        ref.executeScript({
            code: "var btn=document.createElement('button');var t=document.createTextNode('CLOSE');btn.appendChild(t);btn.addEventListener('click', function(e) { cordova.InAppBrowser.open('about:blank'); }, false);document.body.appendChild(btn);"
        });
    }
    });

参考URLに以下の説明がありましたが、まだ消化できておりません。。。

URLにabout:blankが含まれる場合、ref.close()を実行してブラウザを閉じます。
※Web側でボタンをクリックした場合にabout:blankを開く処理を組み込んでおけば、executeScript()は不要です。

■実装改善イメージ

きちんと実装する場合は、公式にあるように以下のような書き方の方がスマートな気がします。

var inAppBrowserRef;
function showHelp(url) {
    var target = "_blank";
    var options = "location=yes,hidden=yes";
    inAppBrowserRef = cordova.InAppBrowser.open(url, target, options);
    inAppBrowserRef.addEventListener('loadstart', loadStartCallBack);
    inAppBrowserRef.addEventListener('loadstop', loadStopCallBack);
    inAppBrowserRef.addEventListener('loaderror', loadErrorCallBack);
}
・・・省略・・・
function loadStopCallBack() {
    if (inAppBrowserRef != undefined) {
        ここに、処理を記述。inAppBrowserRef.show();など
    }
}
・・・省略・・・

■参考

コメント

タイトルとURLをコピーしました