Question

我的网站上有一个链接，上面写着“全屏谷歌地图”。点击它后，我将谷歌地图加载到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 plugin，它将帮助您设置和读取网址的哈希部分（例如，请参阅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 removing hash value from URL

Answer 3

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

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

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

或者，查看jQuery history plugin，它有旧浏览器的变通方法。

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

3 个答案: