page hash and backbutton issue phonegap+Jquery

问题

I am new to phonegap programming and hoping someone can help me out here:

cordova 1.7.0, Jquery 1.7.2 and JQM 1.1.0 are used. The app is being tested on Android.

I am trying to make a launching page for the app.

<body>    
    <div data-role="page" id="page_loading">
        <div data-role="content">
            <h1 >
                <b>welcome</b>
            </h1>
        </div>
    </div>

    <div data-role="page" id="page_1">
    </div>

    <div data-role="page" id="page_2">
    </div>    
</body>

I put an $.mobile.changePage($('page_1'), { changeHash: false}); at the end of onDeviceReady() function. When the app starts, it immediately showed the loading page, after the loading finished, it moves on to the first page.

On the first page, when I press backbutton on page_1, it will exit the app. This is what I want.

Then I used the mobile.changePage again to go to page 2. If I still use changeHash: false, backbutton will again exit the app. If I use changeHash: true, backbutton doesn't go back to page_1, but it goes to the loading page.

If I use changeHash: true on the transition from loading to page1, then the backbutton on page2 will brings up the first page, but on the first page it will brings up the loading page rather then exit the app.

My question is: How can I make the backbutton go back in history on page2, page3 and so on, but exit the app on page1?

My guess is I have to rebuild/clear the hash somehow. Can anyone show me how? thanks

回答1:

I had the same problem and used a workaround:

Page layout:

<body>    
    <!-- page_1 before page_loading in source -->
    <div data-role="page" id="page_1">
    </div>
    <!-- page_loading will be shown first -->
    <div data-role="page" id="page_loading">
        <div data-role="content">
            <h1 >
                <b>welcome</b>
            </h1>
        </div>
    </div>
    <div data-role="page" id="page_2">
    </div>    
</body>

jQuery:

function onBodyLoad()
{   
    //go to page_loading before deviceready without keeping it in browser history
    $.mobile.changePage('#page_loading', {reverse: false, changeHash: false});
    document.addEventListener("deviceready", onDeviceReady, false);
}

function onDeviceReady()
{   
    //your initialization code here...

    //now go to page_1 without keeping it in browser history since the actual first page was #page_1 already       
    $.mobile.changePage('#page_1', {reverse: false, changeHash: false});

    //your code here...
}

This should fit your needs, just try it out...

回答2:

I ran into troubles when upgrading from jquery-1.7.1 to jquery-1.7.2, so I quickly switched back. The JQM site says it currently supports jQuery 1.6.4 and 1.7.1. Could you try downgrading to 1.7.1 and see if it works?

(Using cordova 1.8.0 and JQM-bleeding edge)

回答3:

I know this is a really old question, but I just ran into this issue and thought I'd add my solution:

I just added an "onPageBeforeShow" listener to my splash page, and used a global boolean "splashDisplayed" to detect if this was the first time the splash screen is shown. If yes, set the boolean to true, if not, exit the app.

$(document).on("pagebeforeshow", "#splash", function () {
if(!splashDisplayed){
    splashDisplayed=true;
}else{
    navigator.app.exitApp();
}
});

来源：https://stackoverflow.com/questions/11069421/page-hash-and-backbutton-issue-phonegapjquery

标签

javascript

jquery

jquery-mobile

cordova