javascript - 在灯箱调用中选择 iframe BODY 元素

Question

这就是他们在工作中定义灯箱的方式

$(".lightbox873x560").colorbox({width:"845", height:"555", resize:false, iframe:true, scrolling:"no", opacity:"0.65"});
$(".lightboxGallery").colorbox({width:"845", height:"555", resize:false, iframe:true, scrolling:"no", opacity:"0.65"});

等..

这就是我的建议

$(".lightboxCustom").colorbox({
        width: $(this).attr('lWidth'), height: $(this).attr('lHeight'), resize:false, iframe:true, scrolling:"no", opacity:"0.65"

});

这样属性 lWidth,lHeight 将决定颜色框的尺寸，

问题是加载的内容，在主体上将有另一个预定义的类，它将固定灯箱内容宽度..

那么如何删除它？

我看到 colorbox 得到了这个额外的参数:

$(".lightboxCustom").colorbox({
        width: $(this).attr('lWidth'), height: $(this).attr('lHeight'), resize:false, iframe:true, scrolling:"no", opacity:"0.65",
        onOpen:function(){ alert('onOpen: colorbox is about to open'); },
        onLoad:function(){ alert('onLoad: colorbox has started to load the targeted content'); },
        onComplete:function(){ alert('onComplete: colorbox has displayed the loaded content'); }
});

那么用什么方法呢？ onComplete 对吧？我怎样才能找到/选择 body ？？

尝试:

onComplete:function(){
    console.log( $('#cboxIframe').length ); 
    console.log( $('#colorbox #cboxWrapper #cboxLoadedContent iframe').length ); 

}

但两者都是 log 0 并且是具有 iframe 的类..

编辑

现在这是我最接近的:

$(".lightboxCustom").each(function(){
        $(this).colorbox({width: $(this).attr('lWidth'), height: $(this).attr('lHeight'), resize:false, iframe:true, scrolling:"no", opacity:"0.65",fastIframe:false,

            onComplete:function(){

                $(document).bind('cbox_complete',function(){
                        var iframe = $('#colorbox div#cboxWrapper div div#cboxContent div#cboxLoadedContent iframe#cboxIframe');
                                                                                       var body = iframe.contents().find('body');


                        console.log(iframe.length); /// ---> 1!!
                                            console.log(body.lenght);   /// ---> 1 :(
                                            /*But the problem is that this is empty*/
                                            alert(body.attr('class')); /*when its not*/
                })
            }

        });
});

Answer 1

按照建议here ，尝试将您的代码附加到 iframe 内容的加载事件:

onComplete:function(){
    $("#cboxLoadedContent iframe").load(function(){
        console.log( $(this).length ); 
    });
}

编辑:

我做了更多的测试，能够让 body.length 返回 1。首先，确保您的文档和 iframe 满足 Same Origin Policy .参见 this question了解更多详细信息和解决方法(如果需要)。

其次，我将 bind() 移动到 $(document).ready() 中，缩短了选择器，将 iframe#cboxIframe 更改为 iframe.cboxIframe 并在 iframe 的 .find 之前添加了 .contents():

$(".lightboxCustom").each(function(){
    $(this).colorbox({width: $(this).attr('lWidth'), height: $(this).attr('lHeight'), resize:false, iframe:true, scrolling:"no", opacity:"0.65",fastIframe:false});
});
$(document).bind('cbox_complete',function(){
    var iframe = $('iframe.cboxIframe');
    var body = iframe.contents().find('body');
    console.log(iframe.length); /// ---> 1!!
    console.log(body.length);   /// ---> 1!! :)
});

现在对你有用吗？