public
Created — forked from dhavaln/back_test.html

Cordova 1.9 Backbutton Override

  • Download Gist
index.html
HTML
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
<link rel="stylesheet"
href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.css" />
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script
src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>
<script type="text/javascript" charset="utf-8" src="cordova-1.9.0.js"></script>
<script type="text/javascript">
document.addEventListener("deviceready", onDeviceReady, false);
 
function onDeviceReady() {
document.addEventListener("backbutton", handleBackButton, true);
}
 
function handleBackButton() {
console.log("back clicked");
window.history.back();
}
</script>
</head>
<body>
<div data-role="page" id="page1">
<div data-role="header">
<h1>Page 1</h1>
</div>
<div data-role="content">
<a href="#page2" data-role="button">Goto Page2</a>
</div>
</div>
 
<div data-role="page" id="page2">
<div data-role="header">
<h1>Page 2</h1>
</div>
<div data-role="content">
<a href="#page3" data-role="button">Goto Page3</a>
<a data-rel="back" data-role="button">Rel Back</a> <a id="forceBackTo1"
data-role="button">Force Back</a>
<a data-role="button" onclick="navigator.app.backHistory();">Cordova Back</a>
</div>
</div>
<div data-role="page" id="page3">
<div data-role="header">
<h1>Page 3</h1>
</div>
<div data-role="content">
<a data-role="button" href="page4.html" data-ajax="false">Goto Page4</a>
<a data-rel="back" data-role="button" >Rel Back</a> <a id="forceBackTo2"
data-role="button">Force Back</a>
<a data-role="button" onclick="navigator.app.backHistory();">Cordova Back</a>
</div>
</div>
</body>
 
<script type="text/javascript">
$("#forceBackTo1").click(function() {
history.back();
});
$("#forceBackTo2").click(function() {
history.back();
});
</script>
</html>
page4.html
HTML
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
<link rel="stylesheet"
href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.css" />
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script
src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>
<script type="text/javascript" charset="utf-8" src="cordova-1.9.0.js"></script>
<script type="text/javascript">
document.addEventListener("deviceready", onDeviceReady, false);
 
function onDeviceReady() {
document.addEventListener("backbutton", handleBackButton, true);
}
 
function handleBackButton() {
console.log("back clicked");
window.history.back();
}
</script>
</head>
<body>
 
<div data-role="page" id="page4">
<div data-role="header">
<h1>Page 4</h1>
</div>
<div data-role="content">
<a data-rel="back" data-role="button" href="index.html" data-direction="reverse">Rel Back</a>
<a id="forceBackToIndex" data-role="button" data-direction="reverse">Force Back</a>
<a data-role="button" data-direction="reverse" onclick="navigator.app.backHistory();">Cordova Back</a>
</div>
</div>
</body>
 
<script type="text/javascript">
$("#forceBackToIndex").click(function() {
window.history.back();
});
</script>
</html>

Please sign in to comment on this gist.

Something went wrong with that request. Please try again.