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

时间:2012-02-01 16:02:28

标签: javascript jquery iframe lightbox colorbox

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

$(".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*/
                })
            }

        });
});

4 个答案:

答案 0 :(得分:2)

根据建议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!! :)
});

这对你有用吗?

答案 1 :(得分:0)

$(".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"});
});

答案 2 :(得分:0)

他们记录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());
      }
    } 
  }

答案 3 :(得分:0)

如果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
});​