FancyBox iFrame 元素上的绑定事件

Question

我正在尝试在一个元素上绑定一个事件，该元素是 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+'" width="'+SUBO_IMG_THUMB_WIDTH+'" alt="'+img_alt+'"/></a>';
                }else if(media_type == 'video' || media_type == 'audio'){

                }else{

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

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

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

任何帮助将不胜感激。

谢谢。

皮埃尔·M.

Answer 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