HTML5/jQuery：pushState 和 popState - 深度链接？
首先，我似乎无法弄清楚 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 会成功更改。当我最初加载页面时，如何查询地址栏中的 url/hash。假设我现在有一个像 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);
});
这始终为空。这不应该返回“测试”吗？
first off I can't seem to figure what the first parameter in the pushState function is for? What do I pass to it? I simply want to change the url when scrolling through my page. I'm querying the ID of the current element in the viewport and its ID should also be the link in the url. That works fine with the code below.
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;
});
}
Now I have two questions:
1.) Right now the url in the addressbar changes successfully when I scroll through my page. How can I query the url/hash in the addressbar when I initially load the page. So imagine I have now a link like www.url.com/deep I want to find out what /deep is? Do I simply have to query the entire top.location and split it on each "/"? I mean those links are actually not existing, so how do I avoid 404 pages when calling a url that I manipulated with the pushState function?
2.) How can I find out the last change in the addressbar when clicking the back button? So I want to find /deep when clicking on the browser back button so I can navigate back to that position on the page. I guess this is probably working with popstate but I couldn't find out how!
Thank you for your help!
Update:
window.history.pushState("test", hash, url);
…
$(window).bind('popstate', function(event){
console.log(event.data);
});
This is alway null. Shouldn't this return "test"?
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
来自文档
因此，当您返回到该状态时，您将获得一组由您选择的数据。
查看
location对象……但您不需要这样做。您可以（并且应该）填充页面服务器端。这是pushState的优点之一，如果JavaScript不可用并且服务器端回退顺利集成，链接仍然有效。您添加一个事件侦听器（查找
popState事件），并且您存储在其中的数据将在事件对象上可用。 MDN 有一个示例From the documentation
So it is a bundle of data of your choice that you get back when you return to that state.
Look at the
locationobject … but you don't need to. You can (and should) populate the page server side. This is one of the advantages ofpushState, the link still works if JavaScript is not available and the server side fallback is smoothly integrated.You add an event listener (looking for a
popStateevent), and the data you stored in it will be available on the event object. MDN has an examplejQuery抽象出事件对象，你想要：
event.originalEvent.state;jQuery abstracts out the event object, you want:
event.originalEvent.state;