如何在jQuery Mobile中重定向到其他页面

Question

I'm still fairly new to jquery mobile and how ajax handles page transitions so I suspect the fault may lie somewhere with that. 我对jQuery mobile和ajax如何处理页面转换还是很陌生，因此我怀疑问题可能出在此处。

I have set my jqm / phonegap app up using multiple pages. 我已经使用多个页面设置了我的jqm / phonegap应用程序。

The homepage checks to see if the user is logged in, retrieving memberID information from localStorage. 主页将检查用户是否已登录，并从localStorage检索memberID信息。 My intent is to do this before the page has displayed and if logged in automatically send the user to page 2 using: 我的目的是在页面显示之前执行此操作，如果登录，则使用以下命令将用户自动转到页面2：

$(document).on(
        "pagebeforecreate",
        "#homepage",
        function(){
        $(':mobile-pagecontainer').pagecontainer('change', 'page2.html', {
                transition: 'none',
                changeHash: false,
                reverse: true,
                showLoadMsg: false
            });

The problem is that homepage briefly appears or "flashes" before redirecting. 问题在于重定向之前，主页会短暂出现或“闪烁”。 However, when I make it a single page layout and separate the pages using the data-role="page" principle, it works as desired. 但是，当我将其设为单个页面布局并使用data-role =“ page”原理分隔页面时，它会按需工作。

So my question is how to I prevent homepage from briefly appearing using a multi-page design? 所以我的问题是如何防止使用多页设计短暂显示主页？

Here is the full code... 这是完整的代码...

Homepage: 主页：

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Security-Policy"
    content="default-src *; style-src 'self' 'unsafe-inline'; script-src 'self' 'unsafe-inline' 'unsafe-eval'">
<meta charset="utf-8" />
<meta name="format-detection" content="telephone=no" />
<meta name="msapplication-tap-highlight" content="no" />
<meta name="viewport"
    content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height" />

<!-- styles -->

<link rel="stylesheet" type="text/css" href="css/index.css" />
<link href="jquerymobile/jquery.mobile-1.4.5.css" rel="stylesheet"
    type="text/css" />
    <link rel="stylesheet" type="text/css" href="css/custom.css" />
    <link rel="stylesheet" type="text/css" href="css/bootstrap.css" />
    <link rel="stylesheet" type="text/css" href="css/bootstrapCustom.css" />

    <!-- scripts -->
<script src="js/jquery.js" type="text/javascript"></script>

<script type="text/javascript">
    $(document).bind("mobileinit", function() {
        $.support.cors = true;
        $.mobile.allowCrossDomainPages = true;
    });
</script>

<script src="cordova.js"></script>
<script src="jquerymobile/jquery.mobile-1.4.5.min.js"
    type="text/javascript"></script>
<script src="js/bootstrap.js"></script>
<script src="js/main.js"></script>

<title>Home</title>
</head>

<body>

    <div data-role="page" id="homepage" data-theme="a">

        <div data-role="header">
            <h1>Login</h1>
        </div>

        <div data-role="content">

            <form id="loginForm" name="loginForm">

                <div data-role="fieldcontain" class="ui-hide-label">
                    <label for="username">Username:</label> <input type="text"
                        name="username" id="username" placeholder="Username" autocorrect="off" autocapitalize="off" />
                </div>

                <div data-role="fieldcontain" class="ui-hide-label">
                    <label for="password">Password:</label> <input type="password"
                        name="password" id="password" placeholder="Password" />
                </div>

                <div>
                    <p id="status"></p>
                </div>
                <input type="submit" id="submitButton" value="Login">


            </form>
        </div>

        <div data-role="footer" data-position="fixed" data-theme="b" data-tap-toggle="false">
            <h4>&copy; myFooterThingy 2015</h4>
        </div>

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

Page 2: 第2页：

<!DOCTYPE html>

<html>
<head>
<meta http-equiv="Content-Security-Policy"
    content="default-src *; style-src 'self' 'unsafe-inline'; script-src 'self' 'unsafe-inline' 'unsafe-eval'">
<meta charset="utf-8" />
<meta name="format-detection" content="telephone=no" />
<meta name="msapplication-tap-highlight" content="no" />
<meta name="viewport"
    content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height" />
<link rel="stylesheet" type="text/css" href="css/index.css" />
<link href="jquerymobile/jquery.mobile-1.4.5.css" rel="stylesheet"
    type="text/css" />
    <link rel="stylesheet" type="text/css" href="css/custom.css" />
    <link rel="stylesheet" type="text/css" href="css/bootstrap.css" />
    <link rel="stylesheet" type="text/css" href="css/bootstrapCustom.css" />

<!-- scripts -->
<script src="js/jquery.js" type="text/javascript"></script>
<script src="cordova.js"></script>
<script src="jquerymobile/jquery.mobile-1.4.5.min.js"
    type="text/javascript"></script>
<script src="js/bootstrap.js"></script>
<script src="js/main.js"></script>

<title>Page 2</title>

</head>

<body>

    <div data-role="page" id="page2" data-theme="a">

        <div data-role="header" data-theme="b" id="membertoolbar">Some header stuff</div>

        <div data-role="content">

            <h2>Logged In!</h2>
            <p id="memberID"></p>
        </div>

        <div data-role="footer" data-position="fixed" data-theme="b">
            <h4>&copy; moreFooter Stuff</h4>
        </div>

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

main.js main.js

$(document).on(
        "pagebeforecreate",
        "#homepage",
        function() 
        {
            if (typeof (localStorage.memberID) != "undefined" && localStorage.memberID !== null) 
            {
                $(':mobile-pagecontainer').pagecontainer('change', 'page2.html', 
                {
                    transition: 'fade',
                    changeHash: false,
                    reverse: true,
                    showLoadMsg: false
                });
            }
        });

Answer 1

You can solve this by not using events because this will turn your code in asynchronous and your app's webview will continue rendering just like a normal browser will do. 您可以通过不使用事件来解决此问题，因为这将使代码异步运行，并且应用程序的Web视图将像普通浏览器一样继续呈现。

Essentially add a script tag that will briefly block the browser and check if the user is logged in and in that case it will redirect to the authenticated page. 本质上，添加一个脚本标签，该标签将短暂阻止浏览器并检查用户是否已登录，在这种情况下，它将重定向到经过身份验证的页面。

Homepage: 主页：

<!-- scripts -->
<script>
    if (localStorage.getItem('memberID')) {
        document.location.replace('page2.html');
    }
</script>
<script src="js/jquery.js" type="text/javascript"></script>

You must add it in the head before any scripts to minimize the loading time of your app and perform a redirect before your home screen finishes loading. 您必须在任何脚本之前将其添加到头部，以最大程度地缩短应用程序的加载时间，并在主屏幕完成加载之前执行重定向。 At this point jqm is not loaded yet so you must use plain javascript to do the redirection. 此时jqm尚未加载，因此您必须使用普通的javascript进行重定向。

如何在jQuery Mobile中重定向到其他页面

问题描述

1 个解决方案

解决方案1
0 2015-08-10 15:07:35

如何在jQuery Mobile中重定向到其他页面

问题描述

1 个解决方案

解决方案1 0 2015-08-10 15:07:35

解决方案1
0 2015-08-10 15:07:35