0

問題は、私の Web サイトが、サイド メニューと div を含む 1 つのページだけで構成され、他のすべてのページがそのページに読み込まれていることです。問題は、ブラウザーの中傷機能 (戻る、更新、ブックマーク) がすべてなくなっていることです。だから私の質問は、ページをdivにロードしている間にブラウザ機能を復元する方法がありますか、それともメインページにページをロードする別の方法を使用する必要がありますか?.

メインページ：

<div id="nav" class="mmenu">
            <ul id="nav_ul" class="float_left">
                <li><a class="upper" id="1" target="collabsoft" href= "profilePage.php?property_variable=mine">My Profile</a></li>
                <li><a id="2" class="menu-message"
                       href= "viewMessages.php">Messages<label id="num_msg">(<?php echo $count; ?>)</label></a></li>
                <li><a id="3" class="menu-conference"  target="collabsoft" href= "userHomepage.php">My Conferences</a></li>
                <li><a id="4" class="menu-conference2"  target="collabsoft" href= "availableConferences2.php">Conferences</a></li>
                <li><a id="5" class="menu-request"
                       href= "incomingRequests.php">Requests<label id="num_requests">(<?php echo $total ?>)</label></a></li>
                <li><a id="6" class="menu-news"
                       target="collabsoft" href= "viewNews.php" >News</a></li>
                <li><a class="lower" id="7" target="collabsoft" href= "generalOptions.php" >Options</a></li>
            </ul>
        </div>
        <table id="collabsoft_table" class="no_border">
            <tr>
                <td id="collabsoft_td" class="no_border">
                    <div scrolling="no" id="collabsoft" name="collabsoft" class="collabsoft"></div>
                </td>
            </tr>
        </table>
        <br/>
    </div>
4

1 に答える 1

1

リソースごとに異なる URL を用意する必要があります。そうしないと、ブラウザーは履歴を保持/更新せず、サーバーは同じページを提供します。

  • ハッシュ リンク (URL の「#」文字の後の部分) を使用する必要があります。
  • もう 1 つのオプションは、偽の URL を「プッシュ」するために使用できる HTML5 の History API を使用することです。

主にブラウザーのサポートのため、最初のオプション (ハッシュ URL) に注目しましょう。

また、JavaScript フレームワークを使用しているかどうかを指定していませんでした。(人気があるため) jQuery を使用していると仮定します。

jQueryの歴史を調べる

それがどのように機能するかを説明しましょう：

リンクを作成するときは、「クリック」イベントにバインドする代わりに、次のようにハッシュ文字列を指定します。

<a href="#about" title="About me">About</a>

リンクをクリックしても、ブラウザーはページをリロードしません。

次に、jQuery History プラグインを使用して、その履歴の変更にバインドします。次に例を示します。

$.History.bind('/about',function(state){
    // Load resource using AJAX, update the "main" div, etc.
});
于 2012-07-20T02:04:26.673 に答える