Jquery Mobile根据条件更改页面

Question

我有 2 个 Jquery Mobile 页面（登录和主页）。当用户首次启动应用程序 (phonegap) 时，系统会检查本地存储变量 ('ses_already_login)。如果设置了变量，那么系统不应该显示登录页面，而是应该显示主页。如果未设置变量，则应显示登录页面。

登录页面和主页都包含页眉和页脚以及一些使用 jQuery 动态加载的表单控件。

我正在做类似下面的事情，我看到一个空白的灰色屏幕。条件通过并且可以在我进入空白屏幕之后看到警报消息。

$(document).on("pagebeforeshow","#pg_login",function(){
  if(checkAlreadyLogin()){
    alert('I am inside');
    $.mobile.changePage("#pg_home");
    e.preventDefault();
  }
});

我也知道 changePage 已被弃用。那么，有人可以帮助我如何重定向/更改到主页。

Answer 1

解决方案 1：

在这种情况下，您需要使用pagecontainerbeforechange，而不是任何其他事件。因为在这个阶段，您可以更改toPage 属性以将用户重定向到您想要的任何页面。

该事件总是 触发两次并返回toPage，其中包含目标页面的url（字符串）或jQuery object。但是，在第一次运行时，它会返回 jQuery object 两次。当它第一次触发时，除了您的条件之外，您还必须确保toPage 是object 和absUrl 是undefined。

$(document).on("pagecontainerbeforechange", function(e, data) {
  if(typeof data.toPage == "object" && typeof data.absUrl == "undefined" && !condition) {
    data.toPage = $("#login"); /* change to page with ID "login" */
  }
});

Demo

---

解决方案 2：

另一种解决方案是监听mobileinit事件，检查用户是否登录，然后改变目标页面的位置，使之成为DOM中的“第一”页。

$(document).on("mobileinit", function (e, data) {
    $.mobile.autoInitializePage = false; /* optional - stop auto-initalization */
    if (!condition) {
        $(function () {
            $("#login").prependTo("body"); /* make "login" page first child of "pagecontainer" (body by default) */
            $.mobile.initializePage(); /* optional - manual initialization */
        });
    }
});

您可以根据需要延迟框架的自动初始化，但是，jQuery 函数 .prependTo 应该包含在 $(function() {}); 或 .ready() 中，因为 mobileinit 在 jQuery 库之前触发准备好了。

Demo