FancyBox iFrame 元素上的绑定事件

Posted 2023-05-09

【中文标题】FancyBox iFrame 元素上的绑定事件

【英文标题】：Bind event on FancyBox iFrame element

【发布时间】：2015-04-05 04:12:50

【问题描述】：

我正在尝试在一个元素上绑定一个事件，该元素是 ajax 加载到一个 fancyBox 中加载的 iFrame。

这是我在加载 Box 的页面上的代码。不在 iFrame 中：

    $('a.box').fancybox(
    helpers : 
        overlay : 
            css : 
                'background' : 'rgba(255, 255, 255, 0.6)'
            ,
            locked: false
        
    ,
    padding : 0,
    width: 868,
    fitToView: true,
    iframe: 
        preload   : true
    ,
    beforeShow: function()
        $('.fancybox-iframe').contents().find('.admin-content').css('width', '100%');
        console.info('Content Showing');
        alert('content SHowing');
    ,
    afterLoad: function()
        alert('content loaded');
        $('.fancybox-iframe').ready(function()
            console.info('Content loaded');
            console.info($('.fancybox-iframe').contents().find('a.read-only'));
            $('.fancybox-iframe body').find('a.read-only').bind('click', function(e)
                e.preventDefault();
                var link = $(this);
                var media_type = link.data('media_type');
                parent.$.fancybox.close();

                var $mce = parent.tinymce.get('<?php echo $mceclass; ?>');
                var content = '';
                if (media_type == 'image')
                    var img = link.find('img');
                    var img_src = img.attr('src');
                    var img_alt = img.attr('alt');
                    var imgzoom_src = img.attr('src').replace('_thumb', '_zoom');
                    content = '<a href="'+imgzoom_src+'" class="fancy" title="'+img_alt+'"><img src="'+img_src+'"  /></a>';
                else if(media_type == 'video' || media_type == 'audio')

                else

                
                $mce.focus();
                $mce.insertContent(content);
            );
        );
    
);

请注意，我已经完成了许多测试，并且我注意到 console.log 没有显示在 Firebug 中...

我使用的是 fancybox 2，页面和 iframe 在同一个域中。

任何帮助将不胜感激。

谢谢。

皮埃尔·M.

【问题讨论】：

尝试使用$('.fancybox-iframe').load() 而不是$('.fancybox-iframe').ready()

您好 JFK，感谢您的回答，但它不起作用。另一件事是回调 beforeShow 和 afterLoad 也不会触发...：/

【参考方案1】：

您可能需要在 iframe 中使用afterShow 回调到bind 您的事件并定位正确的选择器（您始终需要使用.contents() 方法来查找选择器 iframe）所以试试：

jQuery(document).ready(function ($) 
    $("a.box").fancybox(
        // API options
        type: "iframe", // you need this
        afterShow: function () 
            $(".fancybox-iframe").ready(function () 
                $(".fancybox-iframe")
                    .contents()
                    .find(".close") // find your selector
                    .on("click", function (e) 
                        e.preventDefault();
                        // do something here after click
                ); // on click
            ); // iframe ready
         // afterShow
    ); // fancybox
); // ready

注意：iframe 和 ajax 交互受Same origin policy

【讨论】：

所有脚本都是“同源”。问题是我的fancybox在“之后”或“之前”没有触发任何事件......：/因为我必须让我的项目继续进行，我决定切换到ColorBox插件并且它运行良好......也许，我'将在另一个项目上再次尝试fancybox 和iFrame。不管怎么说，还是要谢谢你。皮埃尔 M.

经过长时间的研究，我找到了这个答案，这是正确的方法。