无法阻止用户返回上一个登录页面
Unable to prevent user from going back to previous Log In page
当前用户打开应用程序时会看到登录页面。登录后,他们进入主页。我想防止用户在登录后返回登录页面,用户只需点击手机或网络浏览器上的后退按钮即可轻松返回。
下面的方法通过阻止我返回或返回到我想要的页面来实现这一点。例如,如果我将id标识为#home
,它将阻止我返回主页。问题是,这适用于我的应用程序中的所有页面,而不是我真正想强制执行的登录页面。当我使用登录页面的id时,什么都不会发生,我可以通过单击后退按钮返回登录页面。请告诉我做错了什么。
JS-
// triggers when leaving any page
//this doesn't work cos I am using the id of my loginpage. Other page's ids works.
$(document).on('pagebeforechange', function (e, data) {
var to = data.toPage;
if (typeof to === 'string') {
var u = $.mobile.path.parseUrl(to);
to = u.hash || '#' + u.pathname.substring(1);
if (to === '#loginForm') { //will work if I use #benefits for example.
alert('Can not transition the page!');
$.mobile.changePage("#home", {
transition: "flip"
});
e.preventDefault();
e.stopPropagation();
// remove active status on a button, if transition was triggered with a button
$.mobile.activePage.find('.ui-btn-active').removeClass('ui-btn-active ui-shadow').css({
'box-shadow': '0 0 0 #3388CC'
});
}
}
});
登录页面的HTML
<div data-role="page" id="loginForm" data-theme="e" data-add-back-btn="false">
<header data-role="header">
<h1>Log In</h1>
</header>
<form id="form1" name="form1" method="GET" action="http://example.com">
<label for="id">Username </label>
<input type="text" name="id" id="id" />
<label for="password">Password </label>
<input type="password" name="password" id="password" />
<input type="hidden" name="rank" id="rank" value="123">
<input type="submit" name="submit" value="Login"/>
</form>
</div>
HTML福利页面
<div data-role="page" id="benefits" data-theme="e">
<header data-role="header">
<h1>Benefits</h1>
</header>
<article data-role="content" >
<div data-role="collapsible-set" id="benefitsList">
<!--will fill up with info from database-->
</div>
</article>
</div>
编辑:
$(document).on('pagebeforechange', function (e, data) {
var to = $.mobile.path.parseUrl(data.toPage);
if (typeof to === 'object') {
var u = to.href;
if (u === $.mobile.navigate.history.stack[0].url) {
alert('You are logged in!');
var current = $.mobile.pageContainer.pagecontainer("getActivePage");
$.mobile.pageContainer.pagecontainer("change", current);
}
}
});
上述代码适用于除加载的第一个页面外的所有页面的问题是,在默认情况下,jQM不会更改第一个页面的URL中的哈希。上面的代码检查是否从URL中检索到hash
,因为第一页没有hash
,所以它返回false
,因此不会阻止用户返回"登录页"。
下面的代码检查URL并将其与加载的第一个页面的.url
进行比较。.url
存储在$.mobile.navigate.history.stack
中,并且它具有0
索引,因为它是第一页。
jQuery Mobile 1.4
$(document).on('pagebeforechange', function (e, data) {
var to = $.mobile.path.parseUrl(data.toPage);
if (typeof to === 'object') {
var u = to.href;
if (u === $.mobile.navigate.history.stack[0].url) {
alert('You are logged in!');
var current = "#" + $.mobile.pageContainer.pagecontainer("getActivePage")[0].id;
window.location.hash += current;
return false; /* this will stop page change process */
}
}
});
jQuery Mobile<=1.3
更改
$.mobile.navigate.history.stack[0].url
至
$.mobile.urlHistory.stack[0].url
更改
$.mobile.pageContainer.pagecontainer("getActivePage")[0].id
至
$.mobile.activePage[0].id
演示-代码
相关文章:
- 单击按钮后如何逐个调用分区,上一个分区将隐藏
- 如何将值传递到上一个html页面
- Javascript获取上一个元素的内容
- 使用javascript反复检查用户在facebook上的登录状态
- 禁用旋转木马中的下一个按钮和上一个按钮
- 引用vue.js中v-for中的上一个值
- DOM导航-上一个同级未定义
- 构建JS测试,警报窗口重复上一个Q,而不是问下一个Q
- 如何在用户返回和上一个按钮时刷新下拉列表
- 删除“;上一个“;以及“;下一个“;基于当前幻灯片
- 简单的垂直上一个和下一个按钮代码点击上下移动jQuery
- HTML5历史记录-返回上一个完整页面按钮
- 算法:从数组(javascript/angular)中按当前日期获取上一个和下一个事件
- 如何选择给定类的上一个元素
- 用键盘分页jQuery下一个和上一个控件.触发器('点击')不'不起作用
- 如何使请求等待上一个请求完成
- 当我单击下一个或上一个按钮时,datatable显示旧值
- 使用reactjs setState回调获取上一个输入值的计算值
- JQuery关注上一个点击的输入错误
- 无法阻止用户返回上一个登录页面