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将决定颜色框的尺寸，

问题是加载的conent，在主体上将另一个预定义的类，它将修复灯箱的CONTENT宽度..

那么如何删除它？

我看到彩盒获得了这个额外的参数：

$(".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，对吗？我怎样才能找到/选择身体？

尝试：

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，并在.find之前为iframe添加了.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!! :)
});

这对你有用吗？

Answer 2

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

});

这个想法很好，这里有一个关于执行上下文（它的值）如何在JavaScript / jQuery中起作用的轻微误解。

请改为尝试：

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

Answer 3

他们记录0的事实表明你正在获取正确的元素，但要么测量错误的东西，要么过早测量。我过去处理它的方法是在文档加载后从iFrame中调用一个函数。所以，使用jQuery：

在iframe中加载的页面

$(function() { // or you could/should use teh load event, particularly if the lightbox contains images
   window.parent.yourNamespace.setColorBoxToIframe(yourNameSpace.getDocumentHeight());
});

在您的所有页面中

var yourNameSpace = {
    setColorBoxToIframe: function(height) {
        // do the stuff in here that you were doing in your colorbox onLoad event before
    },
    getDocumentHeight: function () { // Can't remember why this is so hacky, but there must've been some reason I wrote it like this
      if (document.compatMode == 'CSS1Compat') {
         return document.body.offsetHeight;
      } else {
         if ($.browser.msie)
            return document.body.scrollHeight;
         else 
            return Math.max($(document).height(), $(document.body).height());
      }
    } 
  }

Answer 4

如果iframe src位于同一域，端口和协议上，则可以访问它。问题是您不知道何时可以访问iframe，也无法进行修改。

彩盒内置的事件不保证任何内容。因此，除非在iframe准备就绪时触发彩色框中的“安全”事件，否则您可能需要自行检查。

浏览器有不同的处理方式，但最安全的方法可能是检查iframe中的BODY以及BODY中是否存在元素，然后我们确定它已经加载（否则你可以得到一个假身体在铬）。

我在这里制作了一个快速原型：http://jsfiddle.net/pfg3B/

它类似于：

// some local stuff for later use
var $colorbox = $('#colorbox'),
    tid, $body, $ibody,
    find = function() {
        $ibody = $colorbox.find('iframe').contents().find('body');
        // also make sure that there are elements in the body
        return $ibody.children('*').length ? $ibody : [];
    };

// attach a colorbox complete handler
$(document).bind('cbox_complete', function(e) {
    // the iframe doesn’t exist yet, we need to start a loop
    tid = setInterval(function() {
       $body = find();
        if($body.length) {
            // the iframe is found, clear the timer and access the body
            clearInterval(tid);
            // do something with $body, remove class or whatever
            $body.html('Yo!');
        }
    },10);
});

// apply the colorbox
$('.lightbox873x560').colorbox({
    iframe: true,
    width: 100, // use your own lwidth if you like, this is just a test
    height: 100
});

选择灯箱调用上的iframe BODY元素

4 个答案: