HTML5 / jQuery：pushState和popState - 深层链接？ [英] HTML5/jQuery: pushState and popState - deep linking?
问题描述
首先，我似乎无法确定pushState函数中的第一个参数是什么？我传递给它的是什么？我只想在滚动浏览页面时更改网址。我正在查询视口中当前元素的ID，其ID也应该是url中的链接。这适用于以下代码。
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;
});
}
现在我有两个问题：
1。）现在，当我滚动浏览页面时，地址栏中的URL会成功更改。我最初加载页面时如何查询地址栏中的url / hash。所以想象我现在有一个像 www.url.com/deep 这样的链接我想找出什么/深？我是否只需查询整个top.location并将其拆分为每个/？我的意思是这些链接实际上不存在，所以如何在调用我使用pushState函数操作的url时避免使用404页面？
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。）我怎样才能找到单击后退按钮时，地址栏中的最后一次更改？所以我想在点击浏览器后退按钮时找到 / deep ，这样我就可以回到页面上的那个位置。我想这可能与popstate有关，但我找不到如何！
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!
感谢您的帮助！
更新：
window.history.pushState("test", hash, url);
...
$(window).bind('popstate', function(event){
console.log(event.data);
});
这总是空的。这不应该返回test吗？
This is alway null. Shouldn't this return "test"?
推荐答案
pushState函数中的第一个参数是什么对于？
what the first parameter in the pushState function is for?
来自文档
状态对象 - 状态对象是一个关联的JavaScript对象使用pushState（）创建的新历史记录条目。每当用户导航到新状态时，就会触发popstate事件，并且事件的state属性包含历史记录条目的状态对象的副本。
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.
所以当你回到那个状态时，你会得到一个你选择的数据包。
So it is a bundle of data of your choice that you get back when you return to that state.
现在滚动浏览页面时，地址栏中的网址会更改。我最初加载页面时如何查询地址栏中的url / hash。
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.
查看 location object ...但你不需要。您可以（并且应该）填充页面服务器端。这是 pushState 的优点之一，如果JavaScript不可用且服务器端回退顺利集成，该链接仍然有效。
Look at the location object … 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.
如何在单击后退按钮时找到地址栏中的最后一次更改？
How can I find out the last change in the addressbar when clicking the back button?
您添加一个事件监听器（寻找 popState 事件），以及您存储在其中的数据将在事件对象上可用。 MDN有一个示例
You add an event listener (looking for a popState event), and the data you stored in it will be available on the event object. MDN has an example
这篇关于HTML5 / jQuery：pushState和popState - 深层链接？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
