6

首先，我似乎无法弄清楚 pushState 函数中的第一个参数是干什么用的？我要传递给它什么？我只是想在滚动页面时更改 url。我正在查询视口中当前元素的 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我想找出 /deep 是什么？我是否只需要查询整个 top.location 并将其拆分为每个“/”？我的意思是这些链接实际上并不存在，那么在调用我使用 pushState 函数操作的 url 时如何避免 404 页面？

2.) 单击返回按钮时，如何查看地址栏中的最后一次更改？所以我想/deep在点击浏览器后退按钮时找到，以便我可以导航回页面上的那个位置。我想这可能与 popstate 一起使用，但我不知道怎么做！

感谢您的帮助！

更新：

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

…</p> 

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

这始终为空。这不应该返回“测试”吗？

4

2 回答 2

6

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

从文档

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

因此，当您返回该状态时，您将获得一组您选择的数据。

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

看看location物体……但你不需要。您可以（并且应该）填充页面服务器端。这是 的优点之一pushState，如果 JavaScript 不可用并且服务器端回退平滑集成，链接仍然有效。

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

您添加一个事件侦听器（查找popState事件），您存储在其中的数据将在事件对象上可用。MDN 有一个例子

于 2012-01-08T09:53:36.117 回答
4

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

于 2012-12-17T21:31:39.493 回答