1

那么，这个问题存在于 jQuery Mobile 中的 $.mobile.changePage - 更新可见 URL？但它没有解决我的问题。

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

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

我已经完成了我认为关闭 ajax 的操作，但它仍然将 #page2.html 附加到 URL ...

我已经阅读 JQM Docs 并在 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 都不会更新......

4

1 回答 1

0

您可以对历史记录使用 html5 规范：windowhistory.replaceState(stateObj, "page 2", "bar.html"); Mozilla 提供的信息：https ://developer.mozilla.org/en-US/docs/DOM/Manipulating_the_browser_history

于 2012-12-19T16:09:01.837 回答