2

我不知道如何为我的 ajax 灯箱使用 pushstate 和 popstate。我需要的：

点击后，打开灯箱并更新网址。在关闭灯箱时，将 url 更新到以前的状态。

在浏览器上向后关闭灯箱并更新 url。在浏览器上再次打开灯箱并更新 url。

示例：http: //instagram.com/instagram

这是我到目前为止所拥有的：

function lightbox() {
    $('body').append('<div class="lightbox"/>');
}

function closeLightbox() {
    $('.lightbox').remove();
}

$(function() {

    $('.module').on('click', function(e) {

        var permalink = $(this).attr('href');

        lightbox();

        $.ajax({
            url: permalink,
            dataType: 'html',
            success: function(data) {
                var permalinkPage = $(data).find('.permalink-content');

                // Load content etc...
            }
        });

        history.pushState(null, null, permalink);

        $('.lightbox').on('click', function() {
            closeLightbox();
        });

        e.preventDefault();
    });

    $(window).on('popstate', function(e) {
        // Some function or if state?
    });

});

代码笔： http ://codepen.io/anon/pen/eLpKr

4

0 回答 0