页面哈希和后退按钮问题 phonegap+Jquery [英] page hash and backbutton issue phonegap+Jquery

查看:22
本文介绍了页面哈希和后退按钮问题 phonegap+Jquery的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我是 phonegap 编程的新手,希望有人能帮助我:

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

我正在尝试为应用制作启动页面.

<div data-role="page" id="page_loading"><div data-role="内容"><h1><b>欢迎</b>

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

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

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

在第一页上,当我按下 page_1 上的后退按钮时,它将退出应用程序.这就是我想要的.

然后我再次使用 mobile.changePage 转到第 2 页.如果我仍然使用 changeHash: false,后退按钮将再次退出应用程序.如果我使用 changeHash: true,则后退按钮不会返回 page_1,但会返回加载页面.

如果我在从加载到 page1 的转换中使用 changeHash: true,那么 page2 上的后退按钮将显示第一页,但在第一页上它会显示加载页面而不是退出应用.

我的问题是:如何让后退按钮返回第 2 页、第 3 页等的历史记录,但退出第 1 页的应用程序?

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

解决方案

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

页面布局:

<!-- page_1 在源中的 page_loading 之前 --><div data-role="page" id="page_1">

<!-- page_loading 将首先显示--><div data-role="page" id="page_loading"><div data-role="内容"><h1><b>欢迎</b>

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

jQuery:

函数 onBodyLoad(){//在 deviceready 之前转到 page_loading 而不将其保留在浏览器历史记录中$.mobile.changePage('#page_loading', {reverse: false, changeHash: false});document.addEventListener("deviceready", onDeviceReady, false);}函数 onDeviceReady(){//你的初始化代码在这里...//现在转到page_1而不将其保留在浏览器历史记录中,因为实际的第一页已经是#page_1$.mobile.changePage('#page_1', {reverse: false, changeHash: false});//你的代码在这里...}

这应该适合您的需求,试试吧...

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

解决方案

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

这篇关于页面哈希和后退按钮问题 phonegap+Jquery的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆