jquery javascript：使用主题标签添加浏览器历史记录？

Question

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

是否可以使浏览器后退按钮与此一起使用？也就是说，如果我单击此链接，我会将 #map 添加到我当前的地址。单击后退按钮后，#map 哈希将被删除，并且带有 google 地图的 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 moving hash value from URL

Answer 3

是的，（使用最新的）浏览器是可能的。

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

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

或者，查看 jQuery 历史记录插件，它具有针对旧版浏览器的解决方法。