jQuery mobile 如何检测刷新 [英] jQuery mobile how to detect refresh

问题描述

一些背景；

默认情况下，当您单击指向单独 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 像这样；

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

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

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

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

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

解决方案

减轻痛苦的一种方法是 将特定于页面的脚本放在 data-role="page" 元素中的相应 html 文件 中，并保留每个脚本都相同的脚本该元素之外的页面(在 body 和/或 head 的和).

这样即使用户刷新页面，所有必要的脚本仍将被执行.但是有一个问题，在绑定任何处理程序之前，您需要先解除它们的绑定.否则，您最终会附加多个处理程序.

为了说明这一点:

在login.html(更新)中:

<脚本>$(document).off('pageinit', '#loginpage').on('pageinit', '#loginpage', function() {$(document).off('click', '#btnaccount').on('click', '#btnaccount', function(){$.mobile.changePage("jqmaccount.html", {reloadPage: true});});console.log("登录页面中的页面初始化");});$(document).off('pageshow', '#loginpage').on('pageshow', '#loginpage', function() {console.log("登录页面中的页面显示");});<div data-role="内容"><a id="btnaccount" href="#" data-role="button">账户</a>

在account.html(更新)中:

<脚本>$(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");});<div data-role="内容"><a id="btnlogout" href="#" data-role="button">注销</a>

在此设置中，如果用户刷新 account.html，该页面上的注销按钮仍然有效.

Some background;

By default when you click a link to a separate HTML page JQM loads the first data-role="page" on that page and attaches it to the DOM of the first page, the thing is JQM only loads that page div and not any scripts etc. that are outside that container.

I have a jQuery mobile app with 5 pages "login.html" "menu.html" "account.html" "settings.html" ..etc

I change pages with like;

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

Also I put all my page load logic to my first page login.html like this;

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

While this app works well, Problem is I find it very fragile and hard to survive from unexpected errors. for example;

Since how every page's body html will load is defined in login.html, this means if any moment user manually refreshs any of these pages, the page will load without running those scripts and load an empty page a without a body. In that moment since the correct DOM is deleted from memory, user is stuck in an app with full of empty pages, only way is he is smart enough to go and type "login.html" to address bar and only then all process can start smoothly.

I think we cant %100 hide address bar, it is visible again after scroll down.

SO this is one problem I come up with, some other weird things can happen and if somehow the DOM gets corrupted only way to use app again is typing login.html address bar, which users probably will not thing about it.

How can I make this app more robust like detecting any DOM corruption or refresh and forward the user to login.html, so he does not stuck in an app with empty pages.

解决方案

One way to alleviate some pain is to put your page-specific scripts inside data-role="page" element in the appropriate html files and keep scripts that are the same for every page outside that element (at the and of the body and/or head).

That way even if the user refreshes the page all necessary scripts will still be executed. One problem though, before binding any handlers you need to unbind them first. Otherwise you'll end up having multiple handlers attached.

To illustrate this:

in login.html (updated):

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

in account.html (updated):

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

In this setup if the user refreshes account.html the Logout button on that page will still work.

这篇关于jQuery mobile 如何检测刷新的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！