jQuery mobile如何檢測刷新

Question

一些背景；

默認情況下，當您單擊指向單獨的HTML頁面的鏈接時，JQM會加載該頁面上的第一個data-role =“ page”並將其附加到第一頁的DOM上，這是因為JQM僅加載該頁面div而沒有加載任何腳本等在該容器之外。

我有一個5頁的jQuery移動應用程序“ login.html”“ menu.html”“ account.html”“ settings.html” ..etc

我用like更改頁面；

 $.mobile.changepage("account.html")

同樣，我將所有頁面加載邏輯都放在這樣的第一頁login.html中 ；

<script>
     $(document).on('pageinit', '#loginpage', function() {
       //do some stuff run some ajax scripts and add some html to its body
    });

  $(document).on('pageinit', '#accountpage', function() {
        //do some stuff run some ajax scripts and add some html to its body
    });

   $(document).on('pageinit', '#settingspage', function() {
        //do some stuff run some ajax scripts and add some html to its body
    });

</script>

雖然此應用程序運行良好，但問題是我發現它非常脆弱，很難從意外錯誤中幸免。 例如;

由於在login.html中定義了每個頁面的正文html的加載方式，這意味着如果用戶在任何時候手動刷新這些頁面中的任何頁面，該頁面將在不運行這些腳本的情況下加載，並加載一個沒有正文的空頁面。 在那一刻，由於從內存中刪除了正確的DOM，用戶被困在一個充滿空頁面的應用程序中，唯一的辦法是他足夠聰明，可以在地址欄中鍵入“ login.html”，然后所有進程才能啟動順利。

我認為我們無法％100隱藏地址欄，向下滾動后再次可見。

因此，這是我想到的一個問題，可能會發生其他一些奇怪的事情，並且如果DOM損壞，只能再次使用app的唯一方式是鍵入login.html地址欄，用戶可能不會對此感興趣。

如何使該應用程序更強大，例如檢測到任何DOM損壞或刷新，然后將用戶轉發到login.html，這樣他就不會卡在空頁面的應用程序中。

Answer 1

減輕痛苦的一種方法是將特定於頁面的腳本放在適當的html文件中的data-role="page"元素內 ，並使該元素之外的每個頁面的腳本都相同（在body和/或head ）。

這樣，即使用戶刷新頁面，所有必要的腳本仍將執行。 但是，一個問題是，在綁定任何處理程序之前，您需要先取消綁定它們。 否則，您最終將擁有多個處理程序。

為了說明這一點：

在login.html （ 已更新 ）：

<div data-role="page" id="loginpage">
    <script>
        $(document).off('pageinit', '#loginpage').on('pageinit', '#loginpage', function() {
            $(document).off('click', '#btnaccount').on('click', '#btnaccount', function(){
                $.mobile.changePage("jqmaccount.html", {reloadPage: true});
            });
            console.log("paginit in loginpage");
        });
        $(document).off('pageshow', '#loginpage').on('pageshow', '#loginpage', function() {
            console.log("pageshow in loginpage");
        });
    </script>
    <div data-role="content">
        <a id="btnaccount" href="#" data-role="button">Account</a>
    </div>
</div>

在account.html （ 已更新 ）：

<div data-role="page" id="accountpage">
    <script>
    $(document).off('pageinit', '#accountpage').on('pageinit', '#accountpage', function() {
        $(document).off('click', '#btnlogout').on('click', '#btnlogout', function(){
            $.mobile.changePage("jqmlogin.html", {reloadPage: true});
        });
        console.log("pageinit in accountpage");
    });
    $(document).off('pageshow', '#accountpage').on('pageshow', '#accountpage', function() {
        console.log("pageshow in accountpage");
    });
    </script>
    <div data-role="content">
        <a id="btnlogout" href="#" data-role="button">Logout</a>
    </div>
</div>

在此設置中，如果用戶刷新account.html，則該頁面上的“注銷”按鈕仍將起作用。