LaurelS LaurelS - 5 months ago 50
HTML Question

How to get a javascript/html5 button to return to previous page? (Browser/PhoneGap)

Edited Version. This is a very basic way to make this work. As shown in various notes and comments, I was trying to use navigator.notifiction and history to make my return-to-calling/previous-page working in PhoneGap. But I realized as I went back and forth with all of Matthias's patient talk through help, that I was doing something so basically wrong with my connections between JavaScript and HTML that I needed to clean that up first.

For the time being I can use this for my initial newbie experiences with PhoneGap, but I hope to continue figuring out how to make this idea work in a more elegantly programatic way.

Possible reasons noted so far, that I think could have given me problems with my second html page

a) In the second page I embedded the script in a different part of the html

b) I had different tags surrounding the script portion in the two different pages

c)In the tag on the second page maybe I was not using

<body onload="onLoad();">


I have been working with this answer to someone else's question
How to navigate one page to another page in android phonegap?

This is "firstLinkPageVerI.html"

<!DOCTYPE HTML>
<html>
<head>


<title>FIRST PhoneGap Page 1</title>

<script type="text/javascript" charset="utf-8">




</script>
<script type="text/javascript" charset="utf-8">

function onLoad()
{
document.addEventListener("deviceready", onDeviceReady, true);
}

function onDeviceReady()
{
// navigator.notification.alert("PhoneGap is working");
}

function callAnothePage()
{
window.location = "secondLinkPageVerI.html";
}

</script>

</head>

<body onload="onLoad();">
<h1>Welcome to Page 1</h1>

<button name="buttonClick" onclick="callAnothePage()">Click Me!</button>
</body>


THIS is "secondLinkPageVerI.html "

<!DOCTYPE HTML>
<html>
<head>


<title>SECOND PhoneGap Page 2</title>

<script type="text/javascript" charset="utf-8">




</script>
<script type="text/javascript" charset="utf-8">

function onLoad()
{
document.addEventListener("deviceready", onDeviceReady, true);
}

function onDeviceReady()
{
// navigator.notification.alert("PhoneGap is working");
}

function callAnothePage()
{
window.location = "firstLinkPageVerI.html";
}

</script>

</head>

<body onload="onLoad();">
<h1>Welcome to Page 2</h1>
<h2>Link Back and Forth</h2>
<button name="buttonClick" onclick="callAnothePage()">RETURN to Page 1</button>
</body>


Both of these pages, both in Safari and PhoneGap, now allow the user to go back and forth between the two pieces of html, using buttons

Answer

Im not sure if i understood everything. But i think thats your problem: this (navigator.notification.alert();) is a function, with which you can use dialogs. Its a plugin for cordova, which you have to install if you want to use it. The following code shows how to override the backbutton-event (the backbutton of your device) and not how to return to the previous page:

  document.addEventListener("deviceready", onDeviceReady, true);   

         function onDeviceReady()               
     {                    
           document.addEventListener("backbutton", BackKeyDown, true);               
     }               

     function BackKeyDown()               
     {               
         console.log ("user return");               
         //debugger;               
         navigator.notification.alert();               
         //navigator.app.exitApp();  // For Exit Application               
     } 

I think the solution for your problem could be the following button:

<button onclick="goback()">go back</button>

with the following function:

    <script>
    function goback(){   
    history.go(-1);
    navigator.app.backHistory();}     </script>

here the reference

Comments