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

Question

很抱歉，如果它重复，但我在这里尝试了很多解决方案，我已经失去了计数...

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

请注意，当Fancybox中的用户打开并且iframe本身来自同一域/服务器上的另一个动态页面时，可以在Fancybox中动态添加或删除这些内容。目前，我所能做的就是到达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>
...

Fancybox

的JQUERY

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

提前Thanx！

Answer 1

以下是您最高机密的简化版本＆＃34;应该做的诀窍代码：

$(".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

注意我在网址中使用了jsfiddle的选项show，否则我们将获得＆＃34;权限＆＃34;整个iframe的错误

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

.there_is_something {
    background-color: #ccc;
}

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