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

Posted 2023-05-09

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

【英文标题】：Change a parent element when Fancybox close based on user generated content within the iframe

【发布时间】：2014-07-28 02:46:04

【问题描述】：

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

目标：当我关闭 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');
        ;
    
); 

提前谢谢！

【参考方案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。

【讨论】：

感谢@JFK 的努力，但这在我的设置中不起作用，我稍后会尝试制作一个«fiddle» 来展示正在发生的事情，但现在我没有足够的时间来做这件事。与此同时，我将依赖父页面的重新加载，即使它远非完美。 «我会回来的...» ;-)