覆盖Android Backbutton行为仅适用于使用PhoneGap的第一页（版本6.2.0） [英] Override Android Backbutton behavior only works on the first page with PhoneGap (Version 6.2.0)
本文介绍了覆盖Android Backbutton行为仅适用于使用PhoneGap的第一页（版本6.2.0）的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我使用Cordova 6.2.0并要覆写Android上的Backbutton。我发现以下解决方案，但这不适用于我（我猜是因为cordova版本）：。
我使用下面的代码覆盖返回按钮：
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
}
问题是，按钮在第一页只有做某事。这是我的index.html页面：
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>
所有其他页面都包含相同的JS脚本。
All other Pages include the same JS-Scripts.
推荐答案
我找到了我的问题的解决方案。我使用 window.open（page.html，_ self）函数浏览我的页面。 这是问题，因为我创建在我的应用程序中的一个新的浏览器实例。而是更智能地使用以下函数：
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"
现在 onBackKey（）函数会在每一个页面触发。
Now the onBackKey() function is firing at every single page.
这篇关于覆盖Android Backbutton行为仅适用于使用PhoneGap的第一页（版本6.2.0）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
