InAppBrowser
プラグインを使用しますので、Cordovaプラグインの管理
よりInAppBrowser
プラグインを追加する必要があります。
a
タグをクリックした場合、_blank
でwindow.open()
を実行するように処理を変更します。
InAppBrowser
のloadstop
イベントで、ブラウザに表示されたページの下部に[CLOSE]
ボタンを設置し、そのボタンをクリックした場合、about:blank
を開く処理をexecuteScript()
で設定します。
URL
にabout:blank
が含まれる場合、ref.close()
を実行してブラウザを閉じます。
※Web側でボタンをクリックした場合にabout:blank
を開く処理を組み込んでおけば、executeScript()
は不要です。
下記のページも参考にしてください。
cordova-plugin-inappbrowser
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<meta http-equiv="Content-Security-Policy" content="default-src * data:; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'">
<script src="components/loader.js"></script>
<link rel="stylesheet" href="components/loader.css">
<link rel="stylesheet" href="css/style.css">
<script>
"use strict";
window.addEventListener("load", function(e) {
console.log("load");
var elem = document.getElementById("jump_url");
elem.addEventListener("click", function(e) {
console.log("click");
var ref = window.open("http://ja.stackoverflow.com/", "_blank", "location=no");
ref.addEventListener("loadstop", function(e) {
console.log("loadstop " + e.url);
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) { window.open('about:blank'); }, false);document.body.appendChild(btn);"
});
}
}, false);
ref.addEventListener("exit", function(e) {
console.log("exit");
alert("close browser");
});
}, false);
}, false);
</script>
</head>
<body>
<br />
<a id="jump_url" href="#">StackOverFlow</a>
</body>
</html>