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 / 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函数中的第一个参数是什么？

来自the documentation

state对象 - state对象是一个JavaScript对象，它与pushState（）创建的新历史记录条目相关联。只要用户导航到新状态，就会触发popstate事件，并且事件的state属性包含历史记录条目的状态对象的副本。

所以当你回到那个状态时，你会得到一堆你选择的数据。

现在，当我滚动浏览页面时，地址栏中的网址会更改。我最初加载页面时如何查询地址栏中的url / hash。

查看location对象...但您不需要。您可以（并且应该）填充页面服务器端。这是pushState的优势之一，如果JavaScript不可用且服务器端回退顺利集成，则链接仍然有效。

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

添加事件侦听器（查找popState事件），您在其中存储的数据将在事件对象上可用。 MDN has an example

Answer 2

jQuery抽象出事件对象，你想要：event.originalEvent.state;

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

2 个答案: