6

一些背景；

默认情况下，当您单击指向单独 HTML 页面的链接时，JQM 会加载该页面上的第一个 data-role="page" 并将其附加到第一页的 DOM，事情是 JQM 仅加载该页面 div 而不是任何脚本等在该容器之外。

我有一个 jQuery 移动应用程序，有 5 页“login.html”“menu.html”“account.html”“settings.html”..etc

我用喜欢改变页面；

 $.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>

虽然这个应用程序运行良好，但问题是我发现它非常脆弱，很难从意外错误中幸存下来。例如;

由于每个页面的正文 html 将如何加载在login.html中定义，这意味着如果任何时候用户手动刷新这些页面中的任何一个，页面将在不运行这些脚本的情况下加载，并加载一个没有正文的空页面。在那一刻，由于从内存中删除了正确的 DOM，用户被困在一个充满空白页面的应用程序中，唯一的方法是他足够聪明，可以在地址栏输入“login.html”，然后所有进程才能启动顺利。

我认为我们不能 %100 隐藏地址栏，向下滚动后它再次可见。

所以这是我想出的一个问题，可能会发生其他一些奇怪的事情，如果 DOM 以某种方式损坏，再次使用应用程序的唯一方法是输入 login.html 地址栏，用户可能不会对此感兴趣。

我怎样才能让这个应用程序更健壮，比如检测任何 DOM 损坏或刷新并将用户转发到 login.html，这样他就不会卡在一个有空页面的应用程序中。

4

1 回答 1

2

减轻痛苦的一种方法是将特定于页面的脚本放在 data-role="page"适当的 html 文件中的元素内，并为该元素外的每个页面保留相同的脚本（在bodyand/or的 and 处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，该页面上的注销按钮仍然有效。

于 2013-01-30T21:31:27.970 回答