jQuery的JavaScript:添加浏览器历史回标签? [英] jquery javascript: adding browser history back with hashtag?

问题描述

我的网站上有一个链接，上面写着全屏Google地图".单击后，我将google地图加载到100％宽和100％高的固定div容器中.单击链接时，我还会添加一个#map作为哈希值.

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 div container. When the link is clicked, I also add a #map as hash.

是否可以使浏览器后退按钮与之配合使用?也就是说，如果单击此链接，则会将#map添加到当前地址.单击后退按钮后，#map哈希将被删除，带有Google地图的div容器也将被删除或隐藏.

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 div container with the google map is removed or hidden.

这有可能吗?

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

    });

});

推荐答案

getState )，它提供了一个跨浏览器工作的hashchange事件.

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 pushState and getState) and it provides a hashchange event that works across browsers.

处理hashchange事件并在那里进行处理.您需要在页面首次加载时手动触发事件.

Handle the hashchange event and do your processing in there. You need to manually trigger the event the first time the page loads.

$(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");

});

这篇关于jQuery的JavaScript:添加浏览器历史回标签?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！