jquery移动对话框出现后退按钮

时间:2013-02-12 16:20:33

标签: jquery-mobile mobile

我的网站上有一个用户登录表单,显示在data-rel ='对话框'链接中。问题是当您点击浏览器后退按钮时,对话框出现在历史记录中。 Screen grabs这里 - a)显示初始未登录状态,b)点击“登录”按钮后打开对话框,c)成功登录,d)我点击后退按钮并获取对话框e)I使用默认的'x'按钮关闭了对话框,然后返回我的主页,但是处于注销状态。

在下面的代码中,登录按钮/链接(到'/php/mobile_login.php')被一个人的名字取代,即服务器端检测到登录cookie。

另外,鉴于我回到禁用了data-dom-cache的主页,是否应该再次从服务器获取它?

非常感谢,凯文

<!DOCTYPE html>

<html lang='en'>
<head>
<meta charset='utf-8'>
<meta http-equiv='X-UA-Compatible' content='IE=edge,chrome=1'>
<title>title</title>
<meta name='viewport' content='width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=no;' />


<script src='//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js'></script>
<script src='/js/jquery_mobile_global_defaults.js'></script>
<script src='http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js'></script>
<link rel='stylesheet' href='/design/mobile_style.css'>
<link rel='stylesheet' href='http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css' />
</head>
<body>

<div data-role='page' data-dom-cache='false' id='homepage'>

    <div class='header'>
        <div class='logo'></div>
        <div class='login'><a href='/php/mobile_login.php' data-overlay-theme='b' data-transition='none' data-rel='dialog' data-role='button' data-inline='true' data-icon='arrow-r' data-iconpos='right' data-theme='a' data-mini='false'>Login</a></div>
    </div>


    <div class='mobile_content'>
    content
    </div>

</div>

</body>
</html>

对话框:

<!DOCTYPE html>

<html lang='en'>
<head>
<meta charset='utf-8'>
<meta http-equiv='X-UA-Compatible' content='IE=edge,chrome=1'>
<title>title</title>
<link rel='stylesheet' href='/design/mobile_style.css'>
<link rel='stylesheet' href='http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css' />
<script src='//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js'></script>
<script src='/js/jquery_mobile_global_defaults.js'></script>
<script src='http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js'></script>
</head>

<body>

<div data-role='dialog'  id='member_login_div' data-overlay-theme='b'>
        <div data-role='header' data-theme='d'>
            <h1>Login</h1>

        </div>

        <div data-role='content' data-theme='c'>
        Login below to apply for jobs with your stored CV (use the desktop version of the site to upload your CV if you have not already done so).
        <form data-ajax='false'  method='POST' action='/php/mobile_do_login.php'>
        <label for='cjloginemail' class='ui-hidden-accessible'>Email Address</label>
        <input type='text' name='user_email' id='cjloginemail' value='kevin@solomon.ie' placeholder='Email Address'>
        <label for='cjloginpass' class='ui-hidden-accessible'>Password</label>
        <input type='password' name='password' id='cjloginpass' value='' placeholder='Password'>
        <input name='Submit' type='submit' value='Login'>
        </form>
        <p><a href='/php/mobile_forgot_pass.php'>I forgot my password - email it to me.</a>


    </div>

</div>
</body>
</html>

1 个答案:

答案 0 :(得分:2)

也许您可以尝试使用$('.ui-dialog').dialog('close').

关闭任何dailog onload

参考:JQuery mobile - Dailogs

我在同一页上看过这个,发生在你身上真是奇怪。

**

历史&amp;后退按钮行为

**

由于对话框通常用于支持页面内的操作,因此框架不会在哈希状态历史记录跟踪中包含对话框。这意味着单击“后退”按钮时,对话框不会出现在浏览历史记录中。例如,如果您在页面上,单击链接以打开对话框,关闭对话框,然后导航到另一个页面,如果您在此时单击浏览器的“后退”按钮,则将导航回第一页,而不是对话框。

更新:FireFox浏览器中的后退按钮上会显示对话框。适用于IE9和Chrome。