将历史记录添加到 jQuery ajax答案

【问题标题】：Add history to jQuery ajax将历史记录添加到 jQuery ajax
【发布时间】：2011-01-09 18:45:37
【问题描述】：

我不知道如何将历史插件功能添加到我的（非常简单的）ajax 代码中。

到目前为止，这是我的代码：

$(function() {

    $.ajaxSetup({ cache: true });
    var hijax = $('ul.hijax a');
    var loader = $('<div id="spinner"></div>');
    hijax.click(function(e){
      hijax.removeClass('ajax-on');
        $(this).addClass('ajax-on');
        var url = $(this).attr('href') + ' #biog-container';
        $("#ajax-container").html(loader).load(url);
        e.preventDefault();
    });
});

这会拉取链接页面的内容，其中包含一个 id 为“biog-containers”的 div（这是一个带有人传记链接的名称列表 - 这是一个巴洛克管弦乐队的网站！）。

ajax 调用效果很好（耶 jQuery！），但我已经在谷歌上搜索并搜索了关于添加对历史插件的支持（我是愚蠢的前端人员）我就是想不通。

感谢您的帮助。

【问题讨论】：

标签： jquery ajax browser browser-history

【解决方案1】：

您可以创建一个全局数组，保存通过脚本单击的项目。在每次点击时推送元素，但已呈现最后一项不会是返回项。

在返回点，检查您的数组是否有多个项目，拉出一项并丢弃它（该项目代表当前页面），拉出另一项并触发点击。

此代码未经测试！：

$(function() {
    var links = new Array(),
    hijax = $('ul.hijax a'),
    loader = $('<div id="spinner"></div>'),
    container = $('#ajax-container'),
    content = container.html();

    $.ajaxSetup({ cache: true });

    hijax.click(function(e){
        var $this = $(this),
        url = $this.attr('href') + ' #biog-container';

        e.preventDefault();
        links.push($this);

        hijax.removeClass('ajax-on');
        $this.addClass('ajax-on');
        container.html(loader).load(url);
    });

    $('#back-button').click(function(e){
        var link;
        e.preventDefault();

        if (links.length > 1) {
            // This represents the current link
            links.pop();
            // This represents the past link
            link = links.pop();
            link.click();
        }
        else {
            // This may be empty, or represent the current content
            links.pop();
            // Show the original content
            container.html(content);
        }
    });
});

【讨论】：