Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
568 views
in Technique[技术] by (71.8m points)

javascript - 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

See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Answer

0 votes
by (71.8m points)

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...


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...