javascript HTML5/jQuery：pushState 和 popState - 深层链接？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8776614/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
HTML5/jQuery: pushState and popState - deep linking?
提问by matt
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.
首先，我似乎无法弄清楚 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;
});
}
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/deepI 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?
1.) 现在，当我滚动页面时，地址栏中的 url 成功更改。最初加载页面时，如何查询地址栏中的 url/hash。所以想象一下我现在有一个链接，就像www.url.com/deep我想找出 /deep 是什么一样？我是否只需要查询整个 top.location 并将其拆分为每个“/”？我的意思是这些链接实际上不存在，那么在调用我使用 pushState 函数操作的 url 时如何避免 404 页？
2.) How can I find out the last change in the addressbar when clicking the back button? So I want to find /deepwhen 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!
2.) 如何在单击后退按钮时找出地址栏中的最后更改？所以我想/deep在点击浏览器后退按钮时找到，以便我可以导航回到页面上的那个位置。我想这可能与 popstate 一起使用，但我不知道如何使用！
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"?
这始终为空。这不应该返回“测试”吗？
采纳答案by Quentin
what the first parameter in the pushState function is for?
pushState 函数中的第一个参数是做什么用的？
From the documentation
从文档
state object — The state object is a JavaScript object which is associated with the new history entry created by pushState(). Whenever the user navigates to the new state, a popstate event is fired, and the state property of the event contains a copy of the history entry's state object.
状态对象——状态对象是一个 JavaScript 对象，它与 pushState() 创建的新历史条目相关联。每当用户导航到新状态时，都会触发 popstate 事件，并且该事件的 state 属性包含历史条目状态对象的副本。
So it is a bundle of data of your choice that you get back when you return to that state.
因此，当您返回到该状态时，您会返回一组您选择的数据。
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.
现在，当我滚动页面时，地址栏中的 url 成功更改。最初加载页面时，如何查询地址栏中的 url/hash。
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 of pushState, the link still works if JavaScript is not available and the server side fallback is smoothly integrated.
看看location对象……但你不需要。您可以（并且应该）填充页面服务器端。这是 的优点之一pushState，如果 JavaScript 不可用，链接仍然有效，并且服务器端回退顺利集成。
How can I find out the last change in the addressbar when clicking the back button?
单击后退按钮时，如何找出地址栏中的最后更改？
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 example
您添加一个事件侦听器（查找popState事件），您存储在其中的数据将在事件对象上可用。MDN 有一个例子
回答by Samuel Cole
jQuery abstracts out the event object, you want: event.originalEvent.state;
jQuery 抽象出你想要的事件对象： event.originalEvent.state;
