Jquery 当fancybox已打开时更新内容

我每次在$.post方法之后调用fancybox 2 on afterLoad事件

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

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

---

我在加载前、演出前和其他一些活动前都做过，但运气不好。我怎样才能让它工作呢？

难道你不想做这样的事情吗

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

---

你不就是想做这样的事吗

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

---

要将新内容加载到已打开的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（内容）

将当前fancybox的内容替换为新内容，还可以选择

$.fancybox.update（）

根据新内容调整窗口大小。

要将新内容加载到已打开的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（内容）

将当前fancybox的内容替换为新内容，还可以选择

$.fancybox.update（）

根据新内容调整窗口大小。

如果您不使用iframe。你可以试试下面的

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

---

如果您不使用iframe，则在这种情况下。你可以试试下面的

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

---

对于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();
                        }
                    });

                });
            }
        }
    });
});

---

对于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();
                        }
                    });

                });
            }
        }
    });
});

---

即使这种方法关闭旧的fancybox并打开新的fancybox，而不是更新当前的fancybox，这对我来说也是有效的！非常感谢。这不会在已打开的fancybox中打开新的html内容，而是先关闭已打开的内容，然后打开新内容。如果添加

openEffect:'none'

，用户将不会注意到创建了新的fancybox弹出窗口。即使此方法也会关闭旧的fancybox并打开新内容，而不是更新当前的fancybox，这对我适用！非常感谢。这不会在已打开的fancybox中打开新的html内容，但会先关闭已打开的内容，然后打开新内容。如果添加

openEffect:'none'

，用户将不会注意到创建了新的fancybox弹出窗口。