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

【问题标题】：page hash and backbutton issue phonegap+Jquery页面哈希和后退按钮问题 phonegap+Jquery
【发布时间】：2012-06-17 06:41:06
【问题描述】：

我是 phonegap 编程的新手，希望有人可以帮助我：

使用了cordova 1.7.0、Jquery 1.7.2 和JQM 1.1.0。该应用正在 Android 上进行测试。

我正在尝试为该应用创建一个启动页面。

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

我在onDeviceReady() 函数的末尾添加了一个$.mobile.changePage($('page_1'), { changeHash: false});。当应用程序启动时，它立即显示加载页面，加载完成后，它移动到第一页。

在第一页，当我按下 page_1 上的返回按钮时，它将退出应用程序。这就是我想要的。

然后我再次使用 mobile.changePage 转到第 2 页。如果我仍然使用changeHash: false，后退按钮将再次退出应用程序。如果我使用changeHash: true，后退按钮不会回到page_1，而是会进入加载页面。

如果我在从加载到 page1 的过渡中使用changeHash: true，那么 page2 上的后退按钮将打开第一页，但在第一页上它会打开加载页而不是退出应用程序。

我的问题是：如何让后退按钮在 page2、page3 等处返回历史记录，但在 page1 退出应用程序？

我的猜测是我必须以某种方式重建/清除哈希。谁能告诉我怎么做？谢谢

【问题讨论】：

标签： javascript jquery jquery-mobile cordova

【解决方案1】：

我遇到了同样的问题并使用了解决方法：

页面布局：

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

这应该符合您的需求，请尝试一下...

【讨论】：

像魅力一样工作！太感谢了！！这里我想出了另一种方法：我重新定义了返回按钮功能，在进入页面时退出应用程序，然后在离开页面时移除 EventListener。通过这种方式，我可以在其他一些不允许用户返回的页面上退出应用程序：$("#page_login").live('pagebeforeshow',function(){document.addEventListener("backbutton", backButtonExit,false);})$("#page_login").live('pagehide',function(){document.removeEventListener("backbutton", backButtonExit,false);})function backButtonExit(){navigator.app.exitApp();}

【解决方案2】：

我从jquery-1.7.1升级到jquery-1.7.2的时候遇到了麻烦，所以赶紧切换回去。 JQM 网站说它目前支持 jQuery 1.6.4 和 1.7.1。能不能试试降级到 1.7.1 看看能不能用？

（使用cordova 1.8.0 和JQM-bleeding edge）

【讨论】：

谢谢！看来1.7.2不是问题。我想问题是我构建页面和哈希记录的方式。

【解决方案3】：

我知道这是一个非常老的问题，但我只是遇到了这个问题并想添加我的解决方案：

我刚刚向我的启动页面添加了一个“onPageBeforeShow”侦听器，并使用了一个全局布尔值“splashDisplayed”来检测这是否是第一次显示启动屏幕。如果是，则将布尔值设置为 true，否则，退出应用程序。

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

【讨论】：