Matthias Gwiozda Matthias Gwiozda - 5 months ago 21
Javascript Question

Override Android Backbutton behavior only works on the first page with PhoneGap (Version 6.2.0)

I am using Cordova 6.2.0 and want to override the backbutton on Android. I found the following solution(s) but this doesn't work for me (I guess it's because of the cordova Version): link.
I am using the following code to override the backbutton:

document.addEventListener("deviceready",ondeviceready, false);
function ondeviceready()
{
document.addEventListener("backbutton", onBackKey, false);
}

function onBackKey()
{
//Do something
}


The Problem is that the backbutton only "does something" on the first page. this is my index.html page:

<html>
<head>
<meta charset="utf-8"/>
<meta name="format-detection" content="telephone=no" />
<meta name="msapplication-tap-highlight" content="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" />
<title>Stadtwerke-App</title>

<script src="js/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" src="cordova.js"></script>

<script src="js/index.js"></script>
<script src="https://cdn.socket.io/socket.io-1.4.5.js"></script>



<script src="js/hammer.js"></script>

<script>


$(document).ready(function(e) {


var startX, curX, startY, curY; // Variables
var newXScroll, newYScroll, genXScroll; // More Variables!

// Change the height of the sidebar, as well as a few things to do with the main content area, so the user
// can actually scroll in the content area.
function sideBarHeight() {

var docHeight = $(document).height();
var winHeight = $(window).height();

$('.slide-in').height(winHeight);
$('#main-container').height(winHeight);
$('#sub-container').height($('#sub-container').height());
}

sideBarHeight();

var outIn = 'in';

Hammer(document.getElementById('main-container')).on('swiperight', function(e) {
$('.slide-in').toggleClass('on');
$('#main-container').toggleClass('on');
outIn = 'out';

});

Hammer(document.getElementById('main-container')).on('swipeleft', function(e) {
$('.slide-in').toggleClass('on');
$('#main-container').toggleClass('on');
outIn = 'in';
});


function runAnimation() {

if(outIn == 'out') {

$('.slide-in').toggleClass('on');
$('#main-container').toggleClass('on');
outIn = 'in';

} else if(outIn == 'in') {

$('.slide-in').toggleClass('on');
$('#main-container').toggleClass('on');
outIn = 'out';

}

}



$('.menu-icon').click(function() {
$('.slide-in').toggleClass('on');
$('#main-container').toggleClass('on');
});




});

</script>


</head>


<body id="index" name="index">
<!--script>start()</script-->











<div id="main-container" class="tk-chaparral-pro">
<div id="Email" class="emailbox"></div>





<h2>News</h2>
<div class="Container" onclick='browser("http://www.tagesschau.de/inland/eeg-reform-105.html")'>
<p class="Buttonbereich" align="center"><img src="img/Tagesschau.png"></p>
<!--p class="Buttonbereich4"> 18.05.2016</p-->
<p class="Buttonbereich2"> 31.05.2016: Wie geht es weiter mit der Energiewende?</p>
</div>

<div class="Container" onclick='browser("http://www.rnz.de/nachrichten/metropolregion_artikel,-Nach-Unwetter-Behinderungen-im-Bahnverkehr-_arid,195765.html")'>
<p class="Buttonbereich" align="center"><img src="img/rnz_schriftzug.png"></p>
<!--p class="Buttonbereich4"> 18.05.2016</p-->
<p class="Buttonbereich2"> 31.05.2016: Nach Unwetter: Behinderungen im Bahnverkehr</p>
</div>

<div class="Container" onclick='browser("http://www.faz.net/aktuell/finanzen/meine-finanzen/geld-ausgeben/so-bekommen-sie-die-praemie-fuer-ihr-e-auto-14239079.html")'>
<p class="Buttonbereich" align="center"><img src="img/link_faz.png"/></p>
<!--p class="Buttonbereich4"> 18.05.2016</p-->
<p class="Buttonbereich2"> 18.05.2016: So bekommen Sie die Prämie für Ihr E-Auto</p>

</div>
<div class="Container" onclick='browser("http://www.rnz.de/nachrichten/region_artikel,-Hochspannungstrasse-bei-Leimen-Nach-80-Jahren-gehen-die-Stahlmasten-in-Rente-_arid,192723.html")' >
<p class="Buttonbereich" align="center"><img src="img/rnz_schriftzug.png"></p>

<p class="Buttonbereich2"> 18.05.2016: Nach 80 Jahren gehen Stahlmasten in Rente</p>
</div>
<div class="Container" onclick='browser("http://www.faz.net/aktuell/wirtschaft/grafik-des-tages-woher-kommt-unser-strom-14237266.html")'>
<p class="Buttonbereich" align="center"><img src="img/link_faz.png"/></p>
<!--p class="Buttonbereich4"> 17.05.2016</p-->
<p class="Buttonbereich2"> 17.05.2016: Woher kommt unser Strom?</p>
</div>


<div id="sub-container">
</div>

<br><br><br><br><br><br><br><br><br><br>

<div class="nav">
<div class="navbox">
<div class="menu-icon">
<div class="bar"> </div>
<div class="bar"> </div>
<div class="bar"> </div>
</div>
</div>

<div class="navbox" style=" float:right"><img src="img/Musterwerke.PNG" style="float:right;height:100%;background-color:white"> </div>
<h1 align="center" style="margin-top:10px;">Stadtwerke-App</h1>

</div>

<div class="footer">

<a rel="external" href="infos.html" ><img src="img/Infos.png" alt="hsag logo" style="float:left;height:80%;border:5px solid white"/></a>

<div class="navbox" style=" float:right" onclick='browser("https://www.hsag.info")' ><img src="img/hsag_logo.png" style="float:right;height:100%;background-color:white"> </div>

</div>


</div>


<div class="slide-in">
<ul class="tk-museo-sans">
<li onclick='window.open("index.html","_self" )' >Startseite</li>
<li onclick='window.open("Index_Nach Registrierung.html","_self" )'>Zählerstandserfassung</li>
<li onclick='window.open("Abfallkalender.html","_self" )'>Abfallkalender</li>
<li onclick='window.open("Apothekennotdienst.html","_self" )'>Apothekennotdienst</li>
<li onclick='window.open("Stoerungsmeldung.html","_self" )'>Störungsmeldung</li>
<li onclick='window.open("Services.html","_self" )'>Kundenportal</li>
<li onclick='window.open("Spartipps.html","_self" )'>Energiespartipps</li>
<li onclick='window.open("Vergleich.html","_self" )'>Verbrauchsvergleich</li>
<li onclick='window.open("Events.html","_self" )'>Event-Übersicht</li>
<li onclick='window.open("Impressum.html","_self" )'>Impressum</li>
<li onclick='window.open("Einstellungen.html","_self" )'>Einstellungen/Account</li>
</ul>
</div>


</body>
</html>


All other Pages include the same JS-Scripts.

Answer

I found a solution for my problem. I was using the window.open("page.html","_self") function to navigate through my pages. This was the problem because i created a new browser-instance in my Application. Instead its smarter to use the following function:

window.location="page.html"

Now the onBackKey() function is firing at every single page.

Comments