jquery javascript：用hashtag添加浏览器历史记录？

我的网站上有一个链接，上面写着“全屏谷歌地图”。 一旦我点击它，我将谷歌地图加载到100％宽和100％高位固定div容器。 单击链接时，我还添加#map作为哈希。

是否可以使浏览器后退按钮与之一起工作？ 也就是说，如果我点击此链接，我会将#map添加到我当前的地址。 单击后退按钮后，将删除#map哈希，并删除或隐藏带有谷歌地图的div容器。

这有点可能吗？

编辑：

 $('.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(); }) }); }); }); 

Answer 1

一个很好的资源和插件来帮助这个是Ben Almans bbq插件 ，它将帮助你设置和读取url的哈希部分（例如，参见pushState和getState ），它提供了一个适用于浏览器的hashchange事件。

处理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"); }); 

Answer 2

可能有一半的问题在这里得到解答： jQuery从URL中删除哈希值

Answer 3

是的，它可能（近期）浏览器。

请参阅document.location.hash以将#map添加到当前URL。

注册一个onhashchange事件监听器以查找更改，但请注意，当您设置标记时，它也会引发此类事件。 因此，您需要丢弃任何包含与您刚刚设置的哈希相同的哈希的事件。

或者，查看jQuery 历史插件 ，该插件具有旧版浏览器的变通方法。