覆盖Android Backbutton行为仅适用于带有PhoneGap(版本6.2.0)的第一页

时间:2016-06-13 08:14:52

标签: javascript android cordova

我正在使用Cordova 6.2.0并希望覆盖Android上的后退按钮。我找到了以下解决方案,但这对我不起作用(我猜这是因为Cordova版本):link。 我使用以下代码覆盖后退按钮:

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

    function onBackKey()
 {
        //Do something
 }

问题是后门按钮只在第一页上“做了些什么”。这是我的index.html页面:

    <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>

所有其他页面都包含相同的JS-Scripts。

2 个答案:

答案 0 :(得分:1)

请尝试以下代码。它适合我

在HTML中:

<body onload="onLoad()">
脚本中的

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

}

答案 1 :(得分:0)

我找到了解决问题的方法。我使用window.open("page.html","_self")函数浏览我的页面。 This是问题,因为我在我的应用程序中创建了一个新的浏览器实例。相反,它更聪明地使用以下功能:

window.location="page.html"

现在onBackKey()函数正在每个页面触发。