HTML5/jQuery:pushState和popState - 深层链接？

Question

首先,我似乎无法确定pushState函数中的第一个参数是什么？我传递给它的是什么？我只想在滚动页面时更改网址.我正在查询视口中当前元素的ID,其ID也应该是url中的链接.这适用于下面的代码.

var currentHash,
        url;

    if (history && history.pushState) {

        $(window).scroll(function() {
            hash = $('.layer:in-viewport').attr('id');
            catHash = $("#"+hash).parent('section').attr('id');

            var data = "nothing";

            if ( catHash != undefined )
                url = "/" + catHash + "/" + hash;
            else
                url = "/" + hash;

            if ( currentHash != hash ) {

                window.history.pushState(data, hash, url);

            }

            currentHash = hash;

        });

    }

现在我有两个问题:

1.)现在,当我滚动浏览页面时,地址栏中的URL会成功更改.我最初加载页面时如何查询地址栏中的url/hash.所以想象我现在有一个链接,比如www.url.com/deep我想找出什么/深？我只需要查询整个top.location并将其拆分为每个"/"吗？我的意思是这些链接实际上不存在,那么在调用我使用pushState函数操作的url时如何避免使用404页面？

2.)如何在单击后退按钮时找到地址栏中的最后一次更改？所以我想/deep在点击浏览器后退按钮时找到,这样我就可以回到页面上的那个位置.我想这可能与popstate有关,但我无法找到方法!

谢谢您的帮助!

更新:

window.history.pushState("test", hash, url);

...

$(window).bind('popstate', function(event){
        console.log(event.data);
    });

这总是空的.这不应该返回"测试"吗？

Answer 1

pushState函数中的第一个参数是什么？

从文档中

state对象 - state对象是一个JavaScript对象,它与pushState()创建的新历史记录条目相关联.每当用户导航到新状态时,都会触发popstate事件,并且事件的state属性包含历史记录条目的状态对象的副本.

因此,当您返回该状态时,它会返回您选择的一组数据.

现在,当我滚动浏览页面时,地址栏中的URL会成功更改.我最初加载页面时如何查询地址栏中的url/hash.

看看location对象......但你不需要.您可以(并且应该)填充页面服务器端.这是其中一个优点pushState,如果JavaScript不可用并且服务器端回退顺利集成,则链接仍然有效.

单击后退按钮时,如何找出地址栏中的最后一次更改？

您添加事件侦听器(查找popState事件),并且您在其中存储的数据将在事件对象上可用.MDN有一个例子