jQuery手机如何检测刷新 [英] jQuery mobile how to detect refresh
问题描述
一些背景;
默认情况下，当您点击指向单独HTML页面的链接时，JQM会在该页面上加载第一个data-role =page并将其附加到第一页的DOM，JQM只加载该页面div，而不是该容器外的任何脚本等。
我有一个jQuery移动应用程序，5页login.htmlmenu.htmlaccount.htmlsettings.html..等等
我改变与网页一样;
$ .mobile.changepage（account.html）
另外，我将所有页面加载逻辑放到第一页 login.html 中，像这样;
< script>
$（document）.on（'pageinit'，'#loginpage'，function（）{
//做一些东西运行一些ajax脚本并在它的body中添加一些html
}） ;
$（document）.on（'pageinit'，'#accountpage'，function（）{
//做一些东西运行一些ajax脚本并在它的body中添加一些html
}）;
$（document）.on（'pageinit'，'#settingspage'，function（）{
//做一些东西运行一些ajax脚本并在它的body中添加一些html
}）;
< / script>
虽然此应用程序运行良好，但问题是我发现它非常脆弱，难以从意外错误中生存。例如;
由于每个页面的body html将如何加载都是在 login.html 中定义的，这意味着如果用户手动刷新中的任何页面，页面将加载而不运行这些脚本，并在没有主体的情况下加载空白页面。在那段时间内，正确的DOM从内存中删除，用户被困在一个充满空白页面的应用程序中，只有这样他才足够聪明，可以输入login.html到地址栏，然后所有进程都可以启动顺利。
我认为我们不能％100隐藏地址栏，在向下滚动后再次可见。
所以这是我想到的一个问题，其他一些奇怪的事情可能会发生，如果DOM以某种方式被破坏，只能再次使用应用程序的方式是输入login.html地址栏，哪些用户可能不会关心它。
如何让此应用更强大，如检测任何DOM损坏或刷新并将用户转发到login.html，因此他不会陷入具有空白页面的应用中。
缓解一些痛苦的一种方法是将页面特定的脚本放入 data-role =page ele在适当的HTML文件中并保留对那些元素之外的每个页面都相同的脚本（在 body 和/或<$ c $即使用户刷新页面，所有必要的脚本仍然会被执行。
一个问题，但绑定任何处理程序之前，您需要先解除绑定它们。否则，您最终会连接多个处理程序。
举例说明： $ b
位于 login.html （已更新）：
< div data-role =pageid =loginpage>
< script> （'pageinit'，'#loginpage'，function（）{
$（document）.off（'click'）。
$（document）.off（'pageinit'，'#loginpage' ，'#btnaccount'）。on（'click'，'#btnaccount'，function（）{
$ .mobile.changePage（jqmaccount.html，{reloadPage：true}）;
} ）;
console.log（loginpage中的paginit）;
}）; （'pageshow'，'#loginpage'，function（）{
console.log（登录页面中的页面显示）
$（document）.off（'pageshow'，'#loginpage'）。 ;
}）;
< / script>
< div data-role =content>
< a id =btnaccounthref =＃data-role =button>帐户< / a>
< / div>
< / div>
位于 account.html （更新）：
< div data-role =pageid =accountpage>
< script> （'pageinit'，'#accountpage'，function（）{
$（document）.off（'click'）。
$（document）.off（'pageinit'，'#accountpage' ，'#btnlogout'）。on（'click'，'#btnlogout'，function（）{
$ .mobile.changePage（jqmlogin.html，{reloadPage：true}）;
} ）;
console.log（pageinit in accountpage）;
}）; （'pageshow'，'#accountpage'，function（）{
console.log（在帐户页面中的页面显示）
$（document）.off（'pageshow'，'#accountpage'）。 ;
}）;
< / script>
< div data-role =content>
< a id =btnlogouthref =＃data-role =button>注销< / a>
< / div>
< / div>
在此设置中，如果用户刷新account.html，则该页面上的注销按钮仍然有效。 / p>
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手机如何检测刷新的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
