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

Question

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.

Why you are adding `document.addEventListener("backbutton", onBackKey, false);` in `onDeviceReady`? — Dhruv, Jun 13 '16 at 08:41
as you can see here: cordova.apache.org/docs/en/4.0.0/cordova/events/… this should be done if you want to use the function. I tryed it without the ondeviceready function, too but the same problem occurs – — Matthias Gwiozda, Jun 13 '16 at 11:09
yes i added this on every page of my App. cordova.js, jquery.min.js, index.js (here is the code, which you can see in the question) and hammer.js (this is for the navigation). — Matthias Gwiozda, Jun 13 '16 at 11:30
i had the same idea with the alert function. it is only alerting when i am on the first page. When i change to another page with "window.open" its broken. I edited the Question and added the html page. lets say my index.js data has only the eventlistener with the backbutton-event. — Matthias Gwiozda, Jun 13 '16 at 11:47
Are you adding script.js after cordova.js in html? Please specify. — Dhruv, Jun 13 '16 at 11:49
sry this was a mistake. I wanted to write: index.js. And my index.js is after the cordova.js Script because it is using some functions of the cordova.js-Data (i dont think this makes any difference at all but anyways). — Matthias Gwiozda, Jun 13 '16 at 11:53
this is the point. (tell me if its not the case). Im new at programming with cordova and that backbutton-problem is actually the only problem im facing right now. — Matthias Gwiozda, Jun 13 '16 at 11:57
You are on the right way. But I can not find any solution at this moment. Please try to inspect device in chrome like: https://developers.google.com/web/tools/chrome-devtools/debug/remote-debugging/remote-debugging?hl=en. And check if any error is there or not in console. — Dhruv, Jun 13 '16 at 12:05
Nothing. I think its because of the cordova.js functions. Some say this happens because cordova.js is loaded multiple times when im using more then only one site. — Matthias Gwiozda, Jun 13 '16 at 13:57
No. I will post it here if i solve it i will not forget this post — Matthias Gwiozda, Jun 15 '16 at 10:07

score 1 · Answer 1 · answered Jun 16 '16 at 06:19

1

Try the following code .It woks for me

In HTML:

<body onload="onLoad()">

in Script:

function onLoad(){
     document.addEventListener("deviceready", onDeviceReady, false);
}
function onDeviceReady() {
        document.addEventListener("backbutton", onBackKeyDown, false);
}
function onBackKeyDown() {

}

answered Jun 16 '16 at 06:19

Abhijeet

36
4

I tryed this already unfortunately it didnt work for me. Do you have more then only one site in your cordova application? Did you change something in the cordova.js or in any other data of the cordova files and which cordova version are you using? – Matthias Gwiozda Jun 16 '16 at 09:03

score 0 · Accepted Answer · answered Jun 20 '16 at 21:51

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.

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

2 Answers2

Linked