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

首先，我似乎无法确定pushState函数中的第一个参数是什么？我通过了什么？我只是想在浏览我的页面时更改网址。我查询视口中当前元素的ID，其ID也应该是URL中的链接。这与以下代码正常工作。HTML5/jQuery：pushState和popState - 深层链接？

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); 
    });

这常是空。不应该返回“测试”吗？

来源

2012-01-08 matt

'event.state'不'event.data' – Quentin 2012-01-08 10:12:04

是的，我试过了，但是没有'event.state'当我'控制台.log（event）;'只有数据，但是数据总是“空”，如果我尝试记录'event.state'，它总是空的！ – matt 2012-01-08 10:17:14

好吧，找到解决方案......好像'$（window）.bind（'popstate'，function（event）{'不工作，但是'window.onpopstate = function（event）{'does！ – matt 2012-01-08 11:16:04

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

从the documentation

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

因此，当您返回到该状态时，您返回的是您选择的一组数据。

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

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

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

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

来源

2012-01-08 09:53:36 Quentin

谢谢，我几乎得到它。我更新了popstate的东西，所以我可以存储一个字符串作为第一个数据属性在PushState中，并在按下后退按钮时返回它，对吗？我只需要知道当按下浏览器后退按钮时，如何查询我使用pushState所做的最后更改。还有一件事：我得到了服务器端的东西，然而，我怎样才能（在我的情况下）与单个页面布局返回到此页面，并查询地址栏？我有一个单一的页面布局，我只是想在页面上的某个位置上更改网址... – matt 2012-01-08 10:12:22

当我发送那些基因处理（非生物）深层连接之一有人在浏览器中打开它们，我想跳到页面上的位置。正如你在上面看到的，'/ url'简单地匹配了视口中元素的ID ......'hash = $（'。layer：in-viewport'）。attr（'id'）;'所以当'div＃example '在视口中，我的网址看起来像'abc.com/example'。当我重新加载页面时，我想查询这个'/ example'并添加一个'＃'并跳转到页面上的这个位置。我该怎么做？ – matt 2012-01-08 10:14:50

您如何使用您在那里存储的数据？ – 2012-09-21 16:10:33

jQuery的抽象了事件对象，你想：event.originalEvent.state;

来源

2012-12-17 21:31:39

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

回答

相关问题