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

cordovaを使ったアプリで、起動時にローカルにあるindex.htmlを開くようにしています。
そこから外部サーバにあるページを開き、
ページ内のボタンクリックなどの操作により、またローカルのindex.htmlを開きたいと思い調べました。
inappbrowserのプラグインを使う必要があるようです。
■cordova-plugin-inappbrowserについて
https://cordova.apache.org/docs/en/latest/reference/cordova-plugin-inappbrowser/index.html
■概要
・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()は不要です。

■参考
https://ja.stackoverflow.com/questions/29794/web%E3%83%9A%E3%83%BC%E3%82%B8%E3%81%8B%E3%82%89%E3%83%AD%E3%83%BC%E3%82%AB%E3%83%AB%E3%81%AB%E6%88%BB%E3%82%8B%E6%96%B9%E6%B3%95
きちんと実装する場合は、公式にあるように以下のような書き方の方がスマートな気がします。
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にローカル画像を渡す方法を教えて下さい。
https://ja.stackoverflow.com/questions/23683/androidwebview%e3%81%aejavascript%e3%81%ab%e3%83%ad%e3%83%bc%e3%82%ab%e3%83%ab%e7%94%bb%e5%83%8f%e3%82%92%e6%b8%a1%e3%81%99%e6%96%b9%e6%b3%95%e3%82%92%e6%95%99%e3%81%88%e3%81%a6%e4%b8%8b%e3%81%95%e3%81%84?rq=1

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です