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 回答