Question

一些背景;

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

我有一个jQuery移动应用程序有5页“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地址栏，用户可能不会对此感到厌烦。< / p>

如何让这个应用程序更健壮，比如检测任何DOM损坏或刷新并将用户转发到login.html，这样他就不会陷入使用空页面的应用程序。

Answer 1

缓解一些痛苦的一种方法是put your page-specific scripts inside data-role="page" element in the appropriate html files并保留对于该元素之外的每个页面（在body和/或head处）的相同脚本。

这样即使用户刷新页面，仍然会执行所有必需的脚本。但是有一个问题，在绑定任何处理程序之前，您需要首先取消绑定它们。否则你最终会连接多个处理程序。

为了说明这一点：

<{1>}中的

（已更新）：

login.html

<{1>}中的

（已更新）：

<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，该页面上的“注销”按钮仍然有效。

jQuery mobile如何检测刷新

1 个答案: