Question

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

Heres是我加载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位于同一个域中。

任何帮助都将不胜感激。

感谢。

Pierre M。

Answer 1

您可能需要使用afterShow回调bind iframe中的事件并定位正确的选择器（您始终需要使用.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 iFrame元素上绑定事件

1 个答案: