使用历史记录API的后退和前进按钮

Question

我有以下测试应用程序:http://dev.driz.co.uk/ajax/

您可以使用jQuery AJAX单击要在其他页面中加载的链接,有两种类型,globalTabs和localTabs,它们将内容加载到不同的面板中.注意:每个页面实际上是整页,但我们只使用jQuery find方法获取我们想要的内容.

为了增强这一点,我使用的是HTML5 History API(用于跨浏览器的History.js).

标题和网址变化很好,历史堆栈正在成功推送,当我使用后退和前进按钮时,网址和标题会恢复原状.

现在,复杂的部分正在加载回来自先前状态的内容,并且更复杂地加载正确的类型,例如全局或本地ajax.为了实现这一点,我想我需要将数据和类型传递给push状态,以便可以再次为popstate重用它...

谁能帮助我指出正确的方向？我有所有的第一部分工作,只是将ajax类型传递给pushState然后重新使用popstate更改的情况.

为了改进这一点,我重写如下,以显示我传递类型和数据的计划:

注意:大写历史是因为我正在使用History.js

var App = {

    init: function() {

        $(document).ready(function() {

            $('.globalTabs li a').live('click', function (e) {
                e.preventDefault(); 
                App.globalLoad( $(this).attr('href') );
            }); 

            $('.localTabs li a').live('click', function (e) {
                e.preventDefault();
                App.localLoad( $(this).attr('href') );
            });

        });

        window.addEventListener('popstate', function(event) {

            // Load correct content and call correct ajax request...

        });

    },

    localLoad: function ( url ) {

        $.ajax({
            url: url,
            success: function (responseHtml) {
                $('.localContent').html($(responseHtml).find('#localHtml'));

                $data = { $(responseHtml).find('#localHtml'), 'local'};

                History.pushState($data, $(responseHtml).filter('title').text(), url);
            }
        });

    },

    globalLoad: function ( url ) {

        $.ajax({
            url: url,
            success: function (responseHtml) {
                $('.mainContent').html($(responseHtml).find('#globalHtml'));

                $data = { $(responseHtml).find('#globalHtml'), 'global'};

                History.pushState($data, $(responseHtml).filter('title').text(), url);
            }
        });

    }

};

App.init();

更新:澄清这个问题,我们寻求帮助是两个问题.

1.)获取使用ajax请求的后退和前进按钮,以便将正确的数据加载回内容区域.

2.)通过使用pushState方法传递内容,将内容加载到正确的区域,以便它知道它是全局div还是本地div请求.

Answer 1

数据对象是错误的,这就是你遇到这个问题的原因.对象由键,值对定义:

object = {key:'value'};
$data = { text:$(responseHtml).find('#globalHtml'), type:'global', url:'the_url'};

不

$data = { $(responseHtml).find('#globalHtml'), 'global'};

使用对象定义,您将使用History.getState()获取数据

History.Adapter.bind(window,'statechange',function(){
    var data = History.getState().data;
    if(data){
        var html = data.text;
        var type = data.type;
        var type = data.url;
        if(html && type){
            if(type == 'global'){
                // just change html
                $('.mainContent').html(html);
                // call the App object's function
                if(url) App.localLoad(url);
            }else{
                $('.localContent').html(html);
            }
        }
    }
})

注意:

• 当statechange事件被触发时,如果存在任何数据,它将触发ajax调用
• 模拟ajax调用而不仅仅改变标题,我认为这将涵盖它

编辑

• 数据对象实际上取自History.getState().数据不是History.getState()
• 为存储的对象添加了另一个参数以保留url
• 使用url和类型可以调用与onClick事件相同的函数

问题:

未捕获的TypeError:将循环结构转换为JSON

一个对象在某处引用自己; 因此消息"循环结构".这意味着您正在尝试对具有对自身的引用的对象进行字符串化,这通常会发生在DOM元素中.你应该考虑改变

$data = { $(responseHtml).find('#localHtml'), 'local'};

至:

$data = { html:$(responseHtml).find('#localHtml').html(), type:'local'};

注意对象的键(html和类型)和html函数调用(.html()),这样你就不会发送不必要的数据,只是html.如果在将其作为DOM对象加载时需要使用html数据,请使用以下命令:

var DOM_Element_loaded = $('<div>').html(html_loaded);

现在你可以使用DOM_Element_loaded搜索/操作加载的html中的数据,而无需将其附加到正文.