简体   繁体   English

页面哈希和后退按钮问题phonegap + Jquery

[英]page hash and backbutton issue phonegap+Jquery

I am new to phonegap programming and hoping someone can help me out here: 我是Phonegap编程的新手,希望有人可以在这里为我提供帮助:

cordova 1.7.0, Jquery 1.7.2 and JQM 1.1.0 are used. 使用了cordova 1.7.0,Jquery 1.7.2和JQM 1.1.0。 The app is being tested on Android. 该应用正在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}); 我放了一个$.mobile.changePage($('page_1'), { changeHash: false}); at the end of onDeviceReady() function. onDeviceReady()函数的末尾。 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. 在第一页上,当我按page_1上的后退按钮时,它将退出该应用程序。 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. 然后,我再次使用mobile.changePage转到页面2。如果仍然使用changeHash: false ,则backbutton将再次退出应用程序。 If I use changeHash: true , backbutton doesn't go back to page_1, but it goes to the loading page. 如果我使用changeHash: true ,则后退按钮不会返回到page_1,而是会转到加载页面。

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. 如果在从加载到第1页的过渡中使用changeHash: true ,则第2页上的changeHash: true将调出第一页,但在第一页上将调出加载的页,而不是退出应用程序。

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? 我的问题是:如何使后退按钮回到第2页,第3页等的历史记录,但退出第1页的应用程序?

My guess is I have to rebuild/clear the hash somehow. 我的猜测是我必须以某种方式重建/清除哈希。 Can anyone show me how? 谁能告诉我如何? thanks 谢谢

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: 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... 这应该符合您的需求,只需尝试一下...

I ran into troubles when upgrading from jquery-1.7.1 to jquery-1.7.2, so I quickly switched back. 从jquery-1.7.1升级到jquery-1.7.2时遇到麻烦,所以我很快就切换回去。 The JQM site says it currently supports jQuery 1.6.4 and 1.7.1. JQM网站表示,它目前支持jQuery 1.6.4和1.7.1。 Could you try downgrading to 1.7.1 and see if it works? 您可以尝试降级到1.7.1并查看是否可行吗?

(Using cordova 1.8.0 and JQM-bleeding edge) (使用cordova 1.8.0和JQM出血边缘)

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. 我只是在初始页面上添加了“ onPageBeforeShow”侦听器,并使用全局布尔值“ splashDisplayed”来检测这是否是首次显示初始屏幕。 If yes, set the boolean to true, if not, exit the app. 如果是,请将布尔值设置为true,否则将退出应用程序。

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

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM