Question

是否可以在Jquery移动HTML5页面中检测页面刷新？

我正在构建一个测验作为客户端项目的一部分 - 测验在一个html页面中浏览jquery移动div页面..例如，如果用户在index.html上#quizpage3并刷新我想检测刷新并将导航返回index.html。

这可能吗？

干杯保罗

Answer 1

这是我正在使用的解决方案。在撰写本文时，tt似乎工作得很好，所以它可能对某人有所帮助。但是，它只是一个快速解决方案，并且为了更好的功能，它最好是服务器端。

首先关闭;请注意，此代码放在JQM代码之前。（来自JQM网站：因为mobileinit事件是立即触发的，所以你需要在加载jQuery Mobile之前绑定你的事件处理程序。“）。我们得到当前页面的哈希值，但是我们不想刷新一些像主页这样的页面。

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

Answer 2

这是一个开始，每次导航到另一个页面时，您都应该获得刷新控制台日志：

http://jsfiddle.net/nkZQQ/5/

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>

也许其他事件会更好：

http://jquerymobile.com/demos/1.1.0/docs/api/events.html

Answer 3

我的答案类似于Patch，但我所做的只是在$（document）.ready行之前将以下内容添加到我本地引用的js文件的顶部。您也可以将它添加到我认为的标题中的任何位置的HTML脚本标记中。

if (location.hash != "" && location.hash != "pageHome") {
    var url = location.href;
    url = url.replace(location.hash,"");
    location.replace(url);
}

Answer 4

您可以使用$(function() {});方法（仅在页面加载时运行）获取网址，如果包含＃，则重定向到主页。

编辑：或使用window.onload = function ...作为纯JS替代方案。

Answer 5

我有点迟了但是我按照Patch的想法来创建一个非常简单的解决方案。在$（document）.ready（）

之前将其放在脚本标记或JS文件中

checkPage();

function checkPage() {
    var _hash = location.hash;

    if (_hash != '' && _hash != "#home") {
        var _url = location.href.replace(_hash, "");
        window.location.href = _url;
    }
}

Answer 6

我认为，这更简单

$(document).on("pagebeforeshow", function() {
    window.location = "page";
});

Jquery Mobile - 检测页面刷新 - 返回主页

6 个答案: