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 にアクセスできません)。特に、ユーザーがセッションでこれらのページのうち 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 とまったく同じですが、ヘッダー、コンテンツ、フッターが「1」ではなく「2」になっています。

なお、このサイトにはログインが必要です。index.php (それ自体に送信するフォームを使用) でのログインに成功すると、PHP は header() を使用して内部ページ (inner.php としましょう) にリダイレクトします。しかし、このリダイレクトの後、ユーザーが inner.php からのコンテンツを表示していると、URL にはまだ index.php が表示されます。

したがって、AJAX または PHP を使用してページを変更しても、URL は更新されません...

4

1 に答える 1

0

history には 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 に答える