Jquery Mobile根据条件更改页面

Question

我有2个Jquery Mobile页面（登录和主页）。当用户首次启动应用程序（phonegap）时，系统会检查本地存储变量（＆＃39; 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()中，因为{{ 1}}在jQuery库准备就绪之前触发。

  

<强> Demo