Navigating between 2 html pages in phonegap

Question

I am working on phonegap application. I am facing one issue.

I have four html pages in my application. Every page contains some widgets like a button or a list view on click of button i move to next page. but when i want to come back on first page i can't. that is when I try to come back using back button of device it closes the app.

I am using device's back button and not user defined, so i need to handle that. same as onBackPressed(); in android.

I know it is because of the WebView widget. but unable to find solution.

I am new to JavaScript, CSS, AJAX, jQuery and HTML5.

How to handle back press in phonegap?

its the same way you are moving to next page, instead use previous page id to go back by adding a button in current page — Greenhorn, Sep 04 '13 at 12:34
if you can read i wrote there back button of device. please read before down vote somebody, even i know that we it will be a same way for moving from one page to another — MobiDev, Sep 04 '13 at 12:39
@agrothe: thanks for your help, support and valuable time. will try it. thanks. — MobiDev, Sep 04 '13 at 12:55

score 2 · Answer 1 · answered Sep 04 '13 at 16:38

You can make a workaround to solve this problem.

You can define a function to be triggered when back button is pressed and then verify which page your user is in, and depending on each page run a different action. For example, if he is in page3 then you go back to page 2, if page 2 then go back to page 1 and if he is in page1 you can close the application.

Wrote an example for you:

    <script type="text/javascript" charset="utf-8" src="phonegap-1.0.0.js"></script>
    <script type="text/javascript" charset="utf-8">

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

    // PhoneGap is loaded and it is now safe to make calls PhoneGap methods
    function onDeviceReady() {
        // Register the event listener
        document.addEventListener("backbutton", onBackKeyDown, false);
    }

    // Handle the back button
    function onBackKeyDown() {
        var whichPage = functionToDetectCurrentPage(); //create a function or detect it somehow
        switch(whichPage){
            case "Page1":
              //works only in android, iOS not quite sure, but heard it's not possible
              //to do programatically
              navigator.app.exitApp();
              break;
            case "Page2":
              window.location = "Page1.html";
              break;
            case "Page3":
              window.location = "Page2.html";
              break;
            case "Page4":
              window.location = "Page2.html";
              break;
        }
    }

Take a look at phonegap documention. http://docs.phonegap.com/en/1.0.0/phonegap_events_events.md.html#backbutton

Let us know whether it helps you!

score 1 · Answer 2 · edited May 23 '17 at 11:54

1

It may not be possible for an inbrowser app.

See related SO answer at: Handle Android Back Button on Phonegap InAppBrowser

edited May 23 '17 at 11:54

Community

1
1

answered Sep 04 '13 at 12:55

Andrew Grothe

2,562
1
32
48

score 0 · Answer 3 · edited Apr 14 '17 at 13:59

0

You can use "backbutton" event for this.

Syntax : document.addEventListener("backbutton", yourCallbackFunction, false);

And you can write your "yourCallbackFunction" like this.

function yourCallbackFunction(){ window.history.back(); }

Documentation link https://cordova.apache.org/docs/en/4.0.0/cordova/events/events.backbutton.html

edited Apr 14 '17 at 13:59

Carl0s1z

4,683
7
32
47

answered May 04 '16 at 13:08

Homen

1,222
1
12
16

Navigating between 2 html pages in phonegap

3 Answers3