Demo
El código completo de la aplicación html es:
<html lang="es">
<head>
<meta charset="utf-8" />
<meta name="format-detection" content="telephone=no" />
<!-- WARNING: for iOS 7, remove the width=device-width and height=device-height attributes. See https://issues.apache.org/jira/browse/CB-4323 -->
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
<link rel="stylesheet" type="text/css" href="css/index.css" />
<link rel="stylesheet" type="text/css" href="css/jquery.mobile-1.4.2.min.css">
<meta name="msapplication-tap-highlight" content="no" />
<title>InAppBrowser</title>
</head>
<body>
<div class="app">
<h1 class=" ui-bar-a ui-corner-all">InAppBrowser</h1>
<h3 id="veces" class="ui-bar-a ui-corner-all"></h3>
<button id="show" class="ui-btn ui-btn-corner-all ui-icon-action ui-btn-icon-left">Show page</button>
</div>
<script type="text/javascript" charset="utf-8" src="cordova.js"></script>
<script type="text/javascript" charset="utf-8" src="js/index.js"></script>
<script type="text/javascript" charset="utf-8">
/* Carga de librerias API */
document.addEventListener("deviceready", onDeviceReady, false);
var button = document.getElementById("show");
var veces = 0;
function onDeviceReady(){
document.getElementById("veces").innerHTML = "<span>Número de veces: "+veces+"</span>";
//escuchadores de eventos
document.addEventListener("pause", onPause, false);
document.addEventListener("resume", onResume, false);
button.addEventListener(
"click",
function(){
/* abrir un nuevo enlace en la ventana InAppBrowser */
var ref = window.open('http://cordova.apache.org', '_system', 'location=no');
ref.show();
},
false
);
}
function onPause() {
veces++;
document.getElementById("veces").innerHTML = "<span>Número de veces:"+veces+"</span>";
}
function onResume() {
alert("Aplicacion activa");
}
</script>
</body>
</html>
Vídeo demostrativo: