Question

所以，这个问题存在$.mobile.changePage in jQuery Mobile - update visible URL?，但它没有解决我的问题。

我正在使用PHP和MySQL开发一个相当大的JQM站点但是我对JQM的理解遇到了一些限制。

那发生了什么事？好吧（查看我帖子中的最后一段代码），导航到page1.html然后从下拉列表中选择page2.html只会将#p更改为“page2.html”，并且不会更新页面页眉，内容或页脚“1”到“2”。

我已经做了我认为关闭ajax的事情，但它仍然将＃page2.html附加到网址...

我一直在阅读JQM文档并在Google上搜索了2天。在谈到这一点时我绝对没有运气，我感谢你们的任何见解。

下面的代码工作得很好（我为在这里发布整个HTML而道歉...我目前无法访问pastebin），页面转换发生得很漂亮，但它不适合我的需求，因为我需要对于大约40页并将所有MySQL调用放在一个文件中会很疯狂，特别是因为用户可能只在一个会话中使用其中的10个页面，这使得其他30个页面的加载毫无意义，耗费时间和数据。

<!DOCTYPE html> 
<html> 
<head> 
    <title>Index Page</title> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
    <script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>

    <script type="text/javascript">
    $(document).bind("pageinit", function(e) {  
        $("#nav").on("change", function(e) {
            $.mobile.changePage($(this).val());
        });
    });
    </script>

    <script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
</head> 
<body> 

<div id="page1" data-role="page" data-theme="c">

    <div data-role="header" data-theme="a">
        <h1>Header 1</h1>
    </div><!-- /header -->

    <div data-role="content">   
        <p>Content 1</p>
    </div><!-- /content -->

    <div data-role="footer" data-theme="b">
        <h1>Footer 1</h1>
        <select id="nav" data-native-menu="false">
            <option value="page1.html">Page 1</option>
            <option value="page2.html">Page 2</option>
        </select>
    </div><!-- /header -->

</div><!-- /page -->


<div id="page2" data-role="page" data-theme="c">

    <div data-role="header" data-theme="a">
        <h1>Header 2</h1>
    </div><!-- /header -->

    <div data-role="content">   
        <p>Content 2</p>
    </div><!-- /content -->

    <div data-role="footer" data-theme="b">
        <h1>Footer 2</h1>
        <select id="nav" data-native-menu="false">
            <option value="page1.html">Page 1</option>
            <option value="page2.html">Page 2</option>
        </select>
    </div><!-- /header -->

</div><!-- /page -->

</body>
</html>

正如我所说，我正在开发的内容相当大，所以为了允许链接并在将来创建和编辑时保持自己的理智，我要求每个页面都在自己的PHP文件中。

我嘲笑了每个页面的预期结果示例：

page1.html

<!DOCTYPE html> 
<html> 
<head> 
    <title>Page 1</title> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
    <script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>

    <script type="text/javascript">
    $(document).bind("mobileinit", function(){
        $.mobile.ajaxEnabled = false;
        $.mobile.pushStateEnabled = false;
    });

    $(document).bind("pageinit", function(e) {
        $("#nav").on("change", function(e) {
            $("#p").html($(this).val());
            $.mobile.changePage($(this).val());
        });
    });
    </script>

    <script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>

</head> 
<body> 

<div data-role="page" data-theme="c">
    <div data-role="header" data-theme="a">
        <h1>Header 1</h1>
    </div><!-- /header -->

    <div data-role="content">   
        <p>Content 1</p>
        <div id="p">placeholder</div>
    </div><!-- /content -->

    <div data-role="footer" data-theme="b">
        <h1>Footer 1</h1>
        <select id="nav" data-native-menu="false">
            <option value="">SELECT</option>
            <option value="page1.html">Page 1</option>
            <option value="page2.html">Page 2</option>
        </select>
    </div><!-- /header -->

</div><!-- /page -->

</body>
</html>

page2.html 与page1.html完全相同，只是它的页眉，内容和页脚带有“2”而不是“1”。

另一方面，此站点需要登录。成功登录index.php（使用提交给自己的表单）后，PHP使用header（）重定向到内部页面（比如inner.php）。但是在重定向和用户显示inner.php中的内容之后，URL仍显示index.php。

因此，无论我使用AJAX还是PHP来更改页面，URL都不会更新......

Answer 1

您可以使用html5规范进行历史记录：windowhistory.replaceState（stateObj，“page 2”，“bar.html”）; Mozilla的信息：https://developer.mozilla.org/en-US/docs/DOM/Manipulating_the_browser_history

jQuery Mobile更新没有哈希的可见URL

page1.html

1 个答案: