jquery javascript：使用主题标签添加浏览器历史记录？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5377320/
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
jquery javascript: adding browser history back with hashtag?
提问by matt
I have a link on my website that says "Fullscreen Google Map". Once I click it, I load a google map into a 100% wide and 100% high position fixed divcontainer. When the link is clicked, I also add a #map as hash.
我的网站上有一个链接，上面写着“全屏 Google 地图”。单击它后，我将 google 地图加载到 100% 宽和 100% 高的位置固定div容器中。单击链接时，我还会添加一个 #map 作为哈希。
Is it possible to make the browser back button work with that? That is, if I click this link, I add #map to my current address. Once I click the back button, the #map hash is removed and the divcontainer with the google map is removed or hidden.
是否可以使浏览器后退按钮与它一起工作？也就是说，如果我单击此链接，我会将 #map 添加到我当前的地址。单击后退按钮后，#map 哈希将被删除，div带有谷歌地图的容器将被删除或隐藏。
Is that somehow possible?
这有可能吗？
edit:
编辑：
$('.showMapLink').live('click', function() {
$('#mapContainer').fadeIn('fast', function () {
loadMap("mapContainer");
top.location.hash = "map";
$(window).bind( 'hashchange', function( event ) {
$('#mapContainer').fadeOut('fast', function () {
$(this).children().remove();
})
});
});
});
回答by Geoff Appleford
A great resource and plugin to help with this is Ben Almans bbq plugin, It will help you set and read the hash part of the url (eg see pushStateand getState) and it provides a hashchangeevent that works across browsers.
Ben Almans bbq plugin是一个很好的资源和插件来帮助解决这个问题，它将帮助您设置和读取 url 的哈希部分（例如，seepushState和getState），并且它提供了一个hashchange跨浏览器工作的事件。
Handle the hashchangeevent and do your processing in there. You need to manually trigger the event the first time the page loads.
处理hashchange事件并在那里进行处理。您需要在页面第一次加载时手动触发事件。
$(document).ready(function(){
$(window).bind( 'hashchange', function( event ) {
// show/hide map here. this will vary depending on what you use in the url
if (window.location.hash == "map"){
$('#mapContainer').fadeIn('fast', function () {
loadMap("mapContainer");
});
} else {
$('#mapContainer').fadeOut('fast', function () {
$(this).children().remove();
})
}
});
$('.showMapLink').live('click', function() {
top.location.hash = "map";
});
$(window).trigger("hashchange");
});
回答by Fortega
Probably, half of your question is answered here: jQuery removing hash value from URL
可能你的问题的一半在这里得到了回答：jQuery 从 URL 中删除哈希值
回答by Alnitak
Yes, it's possible (with recentish) browsers.
是的，有可能（使用最近的）浏览器。
See document.location.hashto add #mapto the current URL.
请参阅document.location.hash添加#map到当前 URL。
Register an onhashchangeevent listener to look for changes, but note that when you setthe tag, it also raises such an event. Hence you need to discard any event which contains the same hash as the one you just set.
注册一个onhashchange事件侦听器以查找更改，但请注意，当您设置标签时，它也会引发此类事件。因此，您需要丢弃包含与您刚刚设置的事件相同的哈希值的任何事件。
Alternatively, look at the jQuery history plugin, which has workarounds for older browsers.
或者，查看 jQuery历史插件，它具有适用于旧浏览器的变通方法。
