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

Question

首先，我似乎无法弄清楚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/哈希值？ 所以，想象一下，我现在有一个链接：www.url.com/deep，我想找出/deep是什么？ 我是否只需查询整个top.location并在每个“/”上拆分即可？我的意思是这些链接实际上不存在，那么在调用经过pushState函数操作的URL时，如何避免404页面？

2.）点击后退按钮时，如何找到地址栏中最后的更改？所以，当我单击浏览器上的后退按钮时，我想找到/deep，以便可以导航回页面上的该位置。我猜这可能是通过popstate工作的，但我无法找到如何做到这一点！

感谢您的帮助！

更新：

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

…

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

这个始终为空。难道不应该返回“test”吗？

- matt

---

event.state 而不是 event.data。 - Quentin

是的，我尝试过了，但是当我使用 console.log(event); 时，没有 event.state。只有数据，然而数据始终为 "null"，如果我尝试记录 event.state，它也始终为 null！ - matt

好的，找到解决方案了...似乎 $(window).bind('popstate', function(event){ 不起作用，但是 window.onpopstate = function(event) { 可以！ - matt

@matt 如果你想使用jQuery访问状态数据，你需要查看event.originalEvent.state。 - Fauntleroy

Answer 1

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

从文档中可以看到：

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

因此它是一组数据，你可以在返回到该状态时获取这些数据。

现在当我滚动页面时，地址栏中的 URL 已经成功更改了。如何在最初加载页面时查询地址栏中的 URL/哈希值？

查看 location 对象……但你不需要这样做。你可以（也应该）在服务器端填充页面。这是使用 pushState 的优势之一，如果 JavaScript 不可用，链接仍然有效，并且服务器端回退是平稳集成的。

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

添加事件监听器（寻找 popstate 事件），并且你存储在其中的数据将在事件对象上可用。 MDN 中有一个示例。

- Quentin

---

谢谢，我差不多明白了。我已经更新了我的问题，针对 popstate 的东西。所以我可以将一个字符串作为 pushState 中的第一个数据属性存储，并在按下后退按钮时返回它，对吧？我只需要知道当我按浏览器后退按钮时如何查询我最后一次使用 pushState 所做的更改。还有一件事：我理解服务器端的操作，但是在我的情况下，我该如何在单页布局中返回此页面并查询地址栏？我有一个单页布局，在页面的某个特定位置改变 URL… - matt

当我发送其中一个生成的（不存在的）深层链接，并且有人在浏览器中打开它们时，我希望跳转到页面上的那个位置。正如您在上面所看到的 /url 简单地匹配了视口中元素的 ID … hash = $('.layer:in-viewport').attr('id'); 因此，当 div#example 在视口中时，我的 URL 看起来像 abc.com/example。当我重新加载页面时，我想查询这个 /example 并添加一个 ＃ 并跳转到页面上的这个位置。我该怎么做？ - matt

你如何使用存储在那里的数据？ - Mild Fuzz

Answer 2

jQuery将事件对象抽象出来，您需要使用：event.originalEvent.state;

- Samuel Cole