在Jquery Mobile HTML5页面中,是否可能检测到页面刷新?
作为客户项目的一部分,我正在构建一个测验 - 测验通过jquery mobile div页面在一个html页面内导航.. 所以例如,如果用户在index.html#quizpage3上并刷新,则希望检测到刷新并将导航返回到index.html。
这是可能的吗?
谢谢 保罗
在Jquery Mobile HTML5页面中,是否可能检测到页面刷新?
作为客户项目的一部分,我正在构建一个测验 - 测验通过jquery mobile div页面在一个html页面内导航.. 所以例如,如果用户在index.html#quizpage3上并刷新,则希望检测到刷新并将导航返回到index.html。
这是可能的吗?
谢谢 保罗
<script type="text/javascript">
var needRedirect = false;
$(document).bind("mobileinit", function(){
var thisPage = location.hash;
if (thisPage != '' && thisPage != '#homepage' && thisPage != '#page1') {
needRedirect = true;
}
});
</script>
<script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>
然后在你自己的代码开头:
if (needRedirect) {
$.mobile.changePage("#homepage");
needRedirect = false;
}
if (location.hash != "" && location.hash != "pageHome") {
var url = location.href;
url = url.replace(location.hash,"");
location.replace(url);
}
好的,这是一个开始,每次您导航到另一个页面时,您应该得到刷新控制台日志:
JS
$("div:jqmData(role='page')").live('pagehide',function(){
console.log('page refreshed, redirect to home');
$.mobile.changePage( "#home", { transition: "slideup"} );
});
HTML
<div data-role="page" id="home">
<div data-role="content">
Hello Refresh
<ul data-role="listview" data-inset="true" data-theme="c" data-dividertheme="f">
<li data-role="list-divider">Home</li>
<li><a href="#page2">Page 2</a></li>
</ul>
</div>
</div>
<div data-role="page" id="page2" data-theme="a">
<div data-role="content">
Hello Page 2
<ul data-role="listview" data-inset="true" data-theme="a" data-dividertheme="a">
<li data-role="list-divider">Page 2</li>
<li><a href="#home">Home</a></li>
</ul>
</div>
</div>
也许其他事件会更适合:
我认为这更简单
$(document).on("pagebeforeshow", function() {
window.location = "page";
});
$(function() {});
方法中获取URL(仅在页面加载时运行),如果它包含#,则重定向到主页。
编辑:或者使用window.onload = function ...
作为纯JS的替代方案。
我有点晚了,但我采用了Patch的想法来创建一个非常简单的解决方案。 将其放入script标签或在$(document).ready()之前的JS文件中。
checkPage();
function checkPage() {
var _hash = location.hash;
if (_hash != '' && _hash != "#home") {
var _url = location.href.replace(_hash, "");
window.location.href = _url;
}
}