在灯箱调用中选择 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:function(){
    console.log( $('#cboxIframe').length ); 
    console.log( $('#colorbox #cboxWrapper #cboxLoadedContent iframe').length ); 

}

但两者都记录 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!! :)
});

现在对你有用吗？

Answer 2

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

});

这个想法很好，这里只是对 JavaScript/jQuery 中的执行上下文（this 的值）如何工作有一点误解。

试试这个：

$(".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 何时可访问或何时可以修改。

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

浏览器有不同的处理方式，但最安全的方法可能是检查该 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
});​