0

Second Edited Version

***** Works in PhoneGap (as well as Safari) *******

  • Starts on one page (index.html)
  • User clicks on a button which sends her to another page "secondLinkPageVerK.html" using a hardcoded local URL
  • On that page, user can click on another button which returns her to the previous page ..... Using a choice of two buttons
  • one button is a hardcoded partial url for index.html
  • the other button choice is a more elegant way, using history

**** Using ideas from Matthais responses below **** I still don't have the "navigator.notification.alert" technique (found in ) How to navigate one page to another page in android phonegap? working, because I think that's a PhoneGap function and I don't yet understand how to download or link to those libraries (searching wrong somehow) phonegap page 1

phonegap page 2

****** index.html is the page that - with a button - links out to secondLinkPageVerK.html, which links back - with a button -to this page *******

<!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 = "secondLinkPageVerK.html";
         }

      </script>

   </head>

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

    <button name="buttonClick" onclick="callAnothePage()">Click Me To Move to Second Page</button>

******secondLinkPageVerK.html - The second page to link to ********

<!DOCTYPE HTML>
<html>
<head>


<title>SECOND PhoneGap Page 2</title>

       <script>   


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

        // using it this way causes confusion, so moving to onLoad
         function onDeviceReady()
         {
              // navigator.notification.alert("PhoneGap is working");

         }

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


         // for the back button
         /*
           document.addEventListener("deviceready", onDeviceReady, true);
         */

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

         function BackKeyDown()
         {
             navigator.notification.alert();
             //navigator.app.exitApp();  // For Exit Application
         }



         function historyBack(){   
              history.go(-1);
              navigator.app.backHistory();
              }     



      </script>

  </head>

  <body onload="onLoad();">
     <h1>Welcome to Page 2</h1>
       <h2> Version K </h2>
    <h2>Link Back and Forth</h2>
    <button name="buttonClick" onclick="callAnothePage()">RETURN to Page 1 - hardcoding local URL</button>
      <center> .* .* . </center>
    <center> . . . </center>
      <center> .* .* . </center>
    <button onclick="historyBack()">Return - history.go technique - cleaner technique</button>

  </body>

  </html>
Community
  • 1
  • 1
LaurelS
  • 492
  • 2
  • 8
  • 22

1 Answers1

1

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

Edit: To explain the navigator.notification.alert function i show you an example of the cordova plugin Page.

First of all (if you want to use the dialogs) you need to install the plugin with your cli:

cordova plugin add cordova-plugin-dialogs

Then this plugin is installed in your selected cordova folder. Afterwards you can use this function like this for example: 

function alertDismissed() {
    // do something
}

navigator.notification.alert(
    'You are the winner!',  // message
    alertDismissed,         // callback
    'Game Over',            // title
    'Done'                  // buttonName
);

with that you are creating something like an alert(); function, but you can define a function ( alertDismissed() ) that will run after the user clicks on the 'Done' - Button. I hope this helped you to understand.

Community
  • 1
  • 1
Matthias Gwiozda
  • 505
  • 5
  • 14
  • That seemed like a good idea, Matthias. And it made sense to me too. – LaurelS Jun 28 '16 at 23:30
  • I put in following code. My console.log flashes, but it still stayed on the same page. – LaurelS Jun 28 '16 at 23:30
  • Page 2: Hey Ho - Linked and Go

    Came to another web page

     – LaurelS Jun 28 '16 at 23:31
  • clearly I don't know how to put code into my comments – LaurelS Jun 28 '16 at 23:32
  • Did you run this in your application? This function is not working in the Browser on your PC. Actually im not sure if this works if you run your app through phone-gap. I think you could try to build the app and try it after installing it on your phone. Its late here i will go to bed and reply tomorrow. Please inform us, if you solved your problem. – Matthias Gwiozda Jun 28 '16 at 23:40
  • I'm sorry I should have been more clear after you were helpful. – LaurelS Jun 29 '16 at 03:24
  • It has the same behavior both in Safari and in PhoneGap on my iPhone. In both cases, the index.html button links up to test.html. But the goBack button does not return to anywhere. It sort of flickers a little when I tap it. – LaurelS Jun 29 '16 at 03:26
  • I never experienced your described flickering before so i cant help you with that. If the first page (linkMeForPhoneGap.html) redirects to text.html. And test.html should only go back to linkMeForPhoneGap.html when klicking the button, then you could simply use : window.location = "linkMeForPhoneGap.html"; instead of my suggested functions (history.go(-1); navigator.app.backHistory() ) in your test.html page. If its not the case try out the " history.go(0); " (reference: http://stackoverflow.com/questions/32761206/cordova-window-history-back-not-working-on-html-back-button-in-ios-9 ) – Matthias Gwiozda Jun 29 '16 at 05:52
  • There is something I'm doing that I must not be writing down/seeing. Because your suggestion of using window.location = "linkMeForPhoneGap.html" should bring up that page, even in Safari on my laptop. And it doesn't. I know the function is being triggered when I click the button, because my console.log message flashes really quickly, but the browser does not go to the "linkMeForPhoneGap.html. So I'm going to step away from this again, and then come back to it looking at the whole thing and comparing to just using that command. I think the flashing must mean I'm doing something else odd. – LaurelS Jun 29 '16 at 18:55
  • Thank you for coming back to this repeatedly. – LaurelS Jun 29 '16 at 18:55
  • can you update your post and show the code, which youre using now. Maybe i can find a solution. – Matthias Gwiozda Jun 29 '16 at 19:35
  • By the way isnt it necessary to use the following scripts: and I dont see this in your page. This could be a solution – Matthias Gwiozda Jun 29 '16 at 19:39
  • I stepped away and came back. While away from it I kept thinking how it didn't make sense that hardcoding the page (local) URL into the window.location wouldn't work, when i was using the same concept coming into that second page. So I knew I must be doing something basically wrong elsewhere. ... Upon return I noticed I had done different things in the layout of the html tags, and I know that the order of things is important. For the time being I just took the original pages code and duplicated it, hardcoding the names in the two different places. That made the phone gap return button work. – LaurelS Jun 29 '16 at 22:21
  • So I haven't learned how to use the original ideas using history yet, but I can go on to trying those out. And though it's not elegant or a good idea long term to hardcode the url's in, it works as I'm learning skills and I can use that idea for the short term. I can now test the back and forth history ideas. And I've learned that probably there are some very key tags and orders of things that I want to pay attention to in the future! All part of the newbie experience. I will edit the code and do the vote up thing. Hope it will make sense to somebodyat the same newbie stage. Thanks again! – LaurelS Jun 29 '16 at 22:24
  • Oh and I guess I don't need and to make this very basic method work. *But* it might make a difference in getting your other suggestions to work, so I will add that into the tool kit. – LaurelS Jun 29 '16 at 22:26
  • Ok then the problem is solved. Sometimes the solution is hidden from the part on which we are concentrating.. i know this can be a frustrating part of developing. And thank you for the vote up. – Matthias Gwiozda Jun 29 '16 at 22:28
  • I improved this basic example with the "history.go" function you had suggested in comments above. Now there is one hardcoded link button as well as a history button. Both take the user to the originating page (index.html) – LaurelS Jun 30 '16 at 22:04