当 Fancybox 关闭时根据 iframe 中用户生成的内容更改父元素

Question

对不起，如果它是重复的，但我在这里尝试了很多解决方案，以至于我失去了计数......

目标：当我关闭 Fancybox 时，我希望能够根据存在（或不存在！）更改最初触发 Fancybox 的链接的类模态 iframe 中的一些内容。

请注意，当 Fancybox 打开时，用户可以在 Fancybox 中即时添加或删除这些内容，并且 iframe 本身来自同一域/服务器上的另一个动态页面。目前我所能做的就是到达 Fancybox 不同的帧，但我无法获得任何内容（请参阅下面的代码）。

因为它是一个绝密项目（!!!）我不能给你确切的代码，但原理是这样的：

HTML，父页面

...
<a href="#" class="fancybox-opener one">Click!</a>
<a href="#" class="fancybox-opener two">Click!</a>
...

HTML，模态页面（iframe）

...
<a href="#" class="add-an-element">Click!</a>
<a href="#" class="delete-an-element">Click!</a>
...
<div>
    <div class="an-element">Can be here at loading... or not!</div>
</div>
...

JQUERY Fancybox

$('.fancybox-opener').fancybox({
    ...
    type: 'iframe',
    beforeClose: function() {
        var triggerLink = $(this.element);
        var theElement = $('.fancybox-inner').contents().find('.an-element');
        if ($(theElement.length) > 0) {
            $(triggerLink).addClass('there_is_something');
        } else {
            $(triggerLink).removeClass('there_is_something');
        };
    }
}); 

提前谢谢！

Answer 1

这是您的“绝密”代码的简化版本，应该可以解决问题：

$(".fancybox-opener").fancybox({
    type: "iframe",
    beforeClose: function () {
        var theElement = $(".an-element", $(".fancybox-iframe").contents());
        theElement.length > 0 ? this.element.addClass("there_is_something") : this.element.removeClass("there_is_something");
    }
});

见JSFIDDLE

注意我在 URL 中使用了 jsfiddle 的选项 show，否则我们会在 iframe 中收到“权限”错误

我还在父页面的选择器.there_is_something 中添加了背景颜色，以便在 iframe 中添加元素并关闭fancybox 时更明显

.there_is_something {
    background-color: #ccc;
}

.. 在 iframe 中添加 .an-element 时，您应该会看到 Lorem Ipsum。