無法阻止用戶返回上一個“登錄”頁面

Question

當前，用戶在打開應用程序時會看到登錄頁面。 登錄后，他們進入主頁。 我想防止用戶登錄后返回登錄頁面，只需單擊電話或Web瀏覽器上的“后退”按鈕，用戶就可以輕松地完成登錄。

通過以下方法，可以防止我來回瀏覽所需的頁面。 例如，如果我將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 for Benefits頁面

<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); 
        }
    }
});

Answer 1

上面的代碼工作的，除了加載第一頁，所有頁面的問題是因為-默認- 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

1. 更改

    $.mobile.navigate.history.stack[0].url 

   至

    $.mobile.urlHistory.stack[0].url 

2. 更改

    $.mobile.pageContainer.pagecontainer("getActivePage")[0].id 

   至

    $.mobile.activePage[0].id 

演示 - 代碼