jquery-mobile - 如何使用哈希导航和 html5 历史记录停止 jQuery Mobile?

标签 jquery-mobile

我正在用 jQuery Mobile 制作一个小网络应用程序,我要停止更新地址栏。
因此手机上的后退按钮不再起作用,用户无法通过 URL 跳转到应用程序的中间。

我已经阅读了文档,但我不明白我需要哪个设置,但我知道它需要在这里输入:

$(document).on("mobileinit", function() {
    //disable history?
});

最佳答案

在应用程序初始化 jQuery 之后但在 jQuery Mobile 初始化之前添加此代码片段:

<script>
    $(document).on("mobileinit", function () {
        $.mobile.hashListeningEnabled = false;
        $.mobile.pushStateEnabled = false;
        $.mobile.changePage.defaults.changeHash = false;
    });
</script>
它应该是这样的:
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script>
    $(document).on("mobileinit", function () {
        $.mobile.hashListeningEnabled = false;
        $.mobile.pushStateEnabled = false;
    });
</script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.js"></script>
请记住,此代码必须在 jQuery Mobile 初始化之前执行,否则它将无法工作,但我想您可能知道这一点。
例子:
索引.html:
<!DOCTYPE html>
<html>
    <head>
    <title>Page Title</title>
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.css" />
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
    <script>
        $(document).on("mobileinit", function () {
          $.mobile.hashListeningEnabled = false;
          $.mobile.pushStateEnabled = false;
          $.mobile.changePage.defaults.changeHash = false;
        });
    </script>
    <script type="text/javascript" src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.js"></script>
    <script>
    $(document).on('pagebeforeshow', '#index', function(){ 
        $(document).on('click', '#open-next-page', function(){ 
            $.mobile.changePage("#second", {transition: 'pop'});  
        });
    });
    </script>
</head>
<body>
<div data-role="page" id="index">
    <div data-role="header">
        <h1>Sample</h1>
    </div>
    <div data-role="content">
        <p></p>
        <p><a id="open-next-page" data-role="button">Open page 2</a></p>
    </div>
</div>
<div data-role="page" id="second">
    <div data-role="header">
        <a data-rel="back">Back</a>
        <h1>Page 2</h1>
    </div>
    <div data-role="content">
        This is page 2 content
    </div>
</div>  
</body>
</html>

关于jquery-mobile - 如何使用哈希导航和 html5 历史记录停止 jQuery Mobile?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24081331/

相关文章:

javascript - 如何使用jquery一次仅选择一个具有不同名称的单选按钮?

javascript - 在 Android 中使用 Jquery Mobile 和 Phonegap 来触摸移动和滚动内容

javascript - 使用phonegap在jquery mobile中链接页面/加载javascript的最佳实践是什么?

javascript - 将文本与可折叠集 jquery 移动中的按钮对齐

jquery - 使用 jQuery 在 iPad 上切换视频源

jquery Mobile 1.4.1 切换 header 但保持栏固定

jquery - 如何自定义水平 jQuery-mobile 单选按钮

javascript - 我如何在移动设备上显式触发 jQuery .click() 或 .tap() 事件

javascript - 如何使用 javascript 验证 .mp4、.mp3 和 PDF 文件

javascript - 如何启用和禁用 selectmenu JQuery 移动版