jquery – 使用带有History API的后退和前进按钮

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

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

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

现在,复杂的部分正在加载回来自先前状态的内容,并且更加复杂地加载正确的类型,例如全球或本地的ajax.为了实现这一点,我想我需要将数据和类型传递给推送状态,以便它可以再次用于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,url);
            }
        });

    }

};

App.init();

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

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

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

解决方法

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

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()
>为存储的对象添加了另一个param以保留url
>使用url和类型可以调用与onClick事件相同的函数

问题：

Uncaught TypeError: Converting circular structure to 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中的数据,而无需将其附加到正文.

jquery – 使用带有History API的后退和前进按钮

解决方法

相关推荐