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

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

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

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

■cordova-plugin-inappbrowserについて

■概要
・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から辿った以下のページも勉強になりました。
Android:WebViewのJavaScriptにローカル画像を渡す方法を教えて下さい。

a

スポンサーリンク







シェアする

  • このエントリーをはてなブックマークに追加

フォローする

スポンサーリンク