0

私はphpでWebアプリケーションを開発しており、メニュータブのクリックでサーバーの例からページを取得するためにajaxリクエストを使用しました。そのため、常にすべてのページがindex.php 固有の htmi div に入ります。

したがって、ブラウザの戻るボタンをクリックすると、常にデフォルトのページに残ります。以前のページの状態を維持するためにブラウザの戻る/進むボタン機能を有効にする方法

4

2 に答える 2

0

このようなものでうまくいくはずですが、私はテストしていません:

(function($, window) {
    function supports_history_api() {
        return !!(window.history && history.pushState);
    }

    if (!supports_history_api()) { return; }  // Doesn't support so return

    function swapContent(href) {
        $.ajax({
            url: href,
            cache: false
        }).done(function( data ) {
            var parser = $("#parser"); //Some empty and hidden element for parsing
            parser.html(data);

            var parsed = parser.find(".container").contents(), //Get the loaded stuff
                realContainer = $(".container").first(); //This one wasn't loaded

            realContainer.html(parsed);
            parser.contents().remove(); //Empty the div again
        });
    }

    $(".aTag").on("click", function(e) { //Select the links to do work on
        var href = $(this).attr("href");
        swapContent(href);
        e.preventDefault();
        history.pushState(null, null, href); //Push state to history, check out HTML 5 History API
    });

    window.onpopstate = function() {
        swapContent(location.href);
    };
})(jQuery, window);

いくつかの HTML:

<div class="container">
    <a class="aTag" href="tiles_1.html"><img src="img/tiles_1.jpg" /></a>
    <a class="aTag" href="tiles_2.html"><img src="img/tiles_2.jpg" /></a>
    <a class="aTag" href="tiles_3.html"><img src="img/tiles_3.jpg" /></a>
    <a class="aTag" href="tiles_4.html"><img src="img/tiles_4.jpg" /></a>
</div>

//Loaded content gets pushed here for parsing
<div id="parser" style="display:none;"></div>
于 2013-04-29T15:25:57.277 に答える
0

コメントで述べたように、HTML5 History API は探している機能を提供しますが、ブラウザーが History API をサポートするという保証なしにブラウザーをサポートする必要がある場合は、jQuery BBQ プラグインを見てください。あなたが行く必要がある場所。覚えておくべき重要な点は、URL ハッシュタグを使用して、実際には ajax ロードのみである「ページ ロード」を記録するということです。

于 2013-04-29T15:25:10.320 に答える