Javascript jQuery mobile如何检测刷新

一些背景

默认情况下，当您单击指向单独HTML页面的链接时，JQM将加载该页面上的第一个数据role=“page”并将其附加到第一个页面的DOM，问题是JQM仅加载该页面div，而不加载该容器外部的任何脚本等

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

我用喜欢的语言换页

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

$（document）.on（'pageinit'，'#loginpage'，function（）{
//做一些事情运行一些ajax脚本并向其主体添加一些html
});
$（document）.on（'pageinit'，'#accountpage'，function（）{
//做一些事情运行一些ajax脚本并向其主体添加一些html
});
$（document）.on（'pageinit'，'#settingspage'，function（）{
//做一些事情运行一些ajax脚本并向其主体添加一些html
});

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

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

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

所以这是我遇到的一个问题，其他一些奇怪的事情可能会发生，如果DOM被破坏，那么再次使用应用程序的唯一方法就是键入login.html地址栏，而用户可能不会在意它

---

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

减轻一些痛苦的一种方法是在该元素之外的每个页面（在

主体

和/或

头部的和处）保留相同的脚本

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

为了说明这一点：

在
login.html
（已更新））中：

在此设置中，如果用户刷新account.html，则该页面上的注销按钮仍将工作。
谢谢，它大部分工作正常，但我有一个问题。如果我刷新一个页面，它将完全加载。如果我返回一个页面，然后再次前进到该页面，它将不会再次加载，并显示缓存中的previos页面。有什么想法吗？我试着在每个更改页面上使用reloadpage:true，但没有帮助，仍然从缓存加载我真的很想说明你的想法：）更新了一点示例。对于我来说，
reloadPage
很好。无论我是否手动刷新帐户页面，都会触发
pageinit
和
pageshow
两个事件。纯魔法，谢谢！pageshow与解除单击绑定一起完成了此操作。所以我想我再也不需要pageinit了？为什么不把所有的脚本放在所有的页面上，这样无论用户从哪里开始，他都会运行所有的脚本？如果您想进行优化，可以使用条件加载程序（如requireJS）在用户进入的第一个页面上只拉入JS文件。通过这种方式，您可以保持页面上没有JS，并且无论用户先到哪里，都会删除您的逻辑
<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>

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