0

我在 php 中开发了 Web 应用程序，并使用ajax 请求从服务器示例中获取页面，单击菜单选项卡 ajax 从服务器请求页面并将其加载到index.php的特定HTMl div中。所以总是所有页面都进入index.php 特定的 htmi div。

因此，单击浏览器后退按钮时，它始终保留在默认页面上。我如何启用浏览器后退/前进按钮功能，以便保持以前的页面状态

4

2 回答 2

0

正如评论中提到的，HTML5 History API 提供了您正在寻找的功能，但如果您必须支持浏览器而不保证这些浏览器将支持 History API，请查看jQuery BBQ 插件，它会得到你需要去的地方。要记住的重要一点是，您将使用 URL 主题标签来记录仅是真正的 ajax 加载的“页面加载”。

于 2013-04-29T15:25:10.320 回答
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 回答