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

Question

我的网站上有一个链接,上面写着"全屏谷歌地图".点击它后,我将谷歌地图加载到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");

});