让我的后退和前进按钮与ajax一起工作

Question

由于我精心修改了一些代码,我的网站工作得更快,但我很乐意,如果浏览器的后退/前进按钮有效.现在,使用下面的代码,浏览器地址栏永远不会改变.当有人点击"返回"时,会将其从应用程序中删除.

是否有任何简单的方法来改变这一点,以便浏览器的后退/前进按钮工作？否则,如果有人能指出我正确的方向.谢谢你的帮助.

$(document).on("ready", function () {

    //I want to load content into the '.page-content' class, with ajax

    var ajax_loaded = (function (response) {

        $(".page-content")

        .html($(response).filter(".page-content"));

        $(".page-content .ajax").on("click", ajax_load);


    });



    //the function below is called by links that are described 
    //with the class 'ajax', or are in the div 'menu' 

    var history = [];

    var ajax_load = (function (e) {

        e.preventDefault();


        history.push(this);
        var url = $(this).attr("href");
        var method = $(this).attr("data-method");


        $.ajax({
            url: url,
            type: method,
            success: ajax_loaded
        });

    });


    //monitor for clicks from menu div, or with
    //the ajax class
    //why the trigger?

    $("#menu a").on("click", ajax_load);
    $(".ajax").on("click", ajax_load);
    $("#menu a.main").trigger("click");



});

Answer 1

这是一种检测您所问问题的方法。

请记住，使用后退和前进按钮是一项危险的任务。

window.onload = function () {

    if (typeof history.pushState === "function") {

        history.pushState("someState", null, null);

        window.onpopstate = function () {

            history.pushState("newState", null, null);

            // Handle the back (or forward) buttons here
            // Will not handle refresh, use onbeforeunload for this.
        };
    }
}