jquery - 当 fancybox 已经打开时更新内容

Question

每次在 $.post 方法之后，我都会在 afterLoad 事件上调用 fancybox 2

$.post ... function(html){
$.fancybox({afterLoad:function(){this.content = html;}});
}

当 Fancybox 关闭时它工作正常，但是当我从已经打开的 Fancybox 再次发出此请求时，我收到错误“无法加载内容”！

我已经验证了 beforeLoad、beforeShow 和其他一些事件，但没有运气。我怎样才能让它工作？

Answer 1

要将新内容加载到已打开的fancybox 中，您可以执行以下操作。这样，fancybox 将不会在使用新内容更新 fancybox 窗口之间关闭：

// is fancybox already popped up?
fancyboxIsOpen: false,

openFancyBox: function (urlToBeLoaded) {
    if (urlToBeLoaded === null) {
        this.closeFancyBox();
    } else {
        if (this.fancyboxIsOpen) {
            this.openInAlreadyOpenedFancyBox(urlToBeLoaded);
        } else {
            this.openFirstFancyBox(urlToBeLoaded);                
        }
    } 
}, 

openFirstFancyBox: function (urlToBeLoaded) {
    var that = this;
    $.fancybox.open({
        type: 'ajax',
        href: urlToBeLoaded,
        afterClose: function() {
            this.openFancyBox(null);
            return true;
        },
        afterShow : function() {
            that.fancyboxIsOpen = true;
            var ahref = jQuery(".fancybox");
            ahref.on("click", function(event){
                //stop the click action, we do not want to load the href in the window
                event.preventDefault();         
                var currentTarget = $(event.currentTarget);
                var urlToBeLoaded = that.getFancyBoxId(currentTarget);
            });     
        }
    });         
}, // end openFirstFancyBox




openInAlreadyOpenedFancyBox: function (urlToBeLoaded) {
    var that = this;

    $.fancybox.showLoading(); // show loading icon
    $.ajax({
        type: "GET",
        url: urlToBeLoaded,
        success : function(content, textStatus, jqXHR) {
            $.fancybox.hideLoading();                        
            jQuery(".fancybox-inner").html(content);
            $.fancybox.update();
        },
        error : function(xhr, status) {
            $.fancybox.hideLoading();
            return false;
        }
    });
},

closeFancyBox: function () {
    this.fancyboxIsOpen = false;
    $.fancybox.close();
},

getFancyBoxId: function (currentTarget) {
    var id = currentTarget.attr("href");  
    return id;        
},

重要的是jQuery(".fancybox-inner").html(content);用新内容替换当前fancybox 的内容，并且可以选择$.fancybox.update();根据新内容调整窗口大小。

Answer 2

如果您不使用 iframe。您可以尝试以下

jQuery.fancybox({'content' : html});

Answer 3

你不想做这样的事情吗？

$.post ... function(html){
    $.fancybox( html );
}

Answer 4

对于fancybox 3，提出这个解决方案：

$(`.foo`).on('click', function(e) {
    e.preventDefault();
    const self = $(this);

    $.fancybox.open({
        type: 'ajax',
        src: self.attr('href'),
        opts: {
            afterShow: function(instance, current) {
                $('.bar').on('click', function(e) {
                    e.preventDefault();
                    instance.showLoading(current);

                    $.ajax({
                        type: 'GET',
                        url: $(this).attr('href'),
                        success: function(content) {
                            instance.hideLoading(current);
                            instance.setContent(current, content);
                            instance.update();
                        }
                    });

                });
            }
        }
    });
});