Select the iframe BODY element on the lightbox call

Question

this is how they defined the lightbox at work

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

etc..

An this is what i am suggesting

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

});

this way the attributes lWidth,lHeight would determine the colorbox's dimensions,

the problem is that the loaded conent, on the body will have another pre-defined class that will fix the lightbox CONTENT width..

So how can i remove it?

i saw that colorbox gets this extra params:

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

So in what method? onComplete, right? and how can i find/select the body??

trying with:

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

}

but both log 0 and is the class that has the iframe..

EDIT

For now this is the closest i have been:

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

        });
});

Is domain of $(".lightboxCustom") links differ from your site domain? — Sergey Ratnikov, Feb 28 '12 at 10:55

score 2 · Answer 1 · edited May 23 '17 at 10:34

As suggested here, try attaching your code to a load event for the iframe content:

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

EDIT:

I did a bit more testing and was able to get body.length to return 1. First, make sure your document and iframe meet the Same Origin Policy. See this question for more details and a workaround if needed.

Second, I moved the bind() into $(document).ready(), shortened the selector, changed iframe#cboxIframe to iframe.cboxIframe and added .contents() before .find for 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});
});
$(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!! :)
});

Does that work for you now?

You could set the fastIframe (http://jacklmoore.com/colorbox/#setting-fastiframe) property to false. That would postpone the onComplete callback until after the iframe has finished loading. — Jack, Feb 01 '12 at 18:10

score 0 · Answer 2 · answered Feb 01 '12 at 18:16

0

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

});

This idea is fine, there is just a slight misunderstanding here about how the execution context (the value of this) works in JavaScript/jQuery.

Try this instead:

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

answered Feb 01 '12 at 18:16

Jack

9,448
3
29
33

Edited question with closest solution – Toni Michel Caubet Feb 02 '12 at 09:22
Thanks for your help, but I don't understand how is this going to remove the class to the iframe's body – Toni Michel Caubet Feb 23 '12 at 17:05

score 0 · Answer 3 · answered Feb 27 '12 at 09:44

The fact they're logging 0 suggests you're fetching teh right elements, but either measuring the wrong thing or measuring too soon. The way I've tackled it in the past is to call a function from within the iFrame once the document has loaded. So, using jQuery:

In the page loaded in the iframe

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

In all your pages

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

David Hellsing · Answer 4 · 2012-02-29T02:31:19.307

If the iframe src is on the same domain, port and protocol, you can access it. The problem is that you don’t know when the iframe is accessible nor ready to be modified.

The events built in colorbox doesn’t guarantee anything. So unless there is a "safe" event in colorbox that triggers when the iframe is ready, you probably need to do your own check.

Browsers have different ways of handling this, but the safest way is probably to check for the BODY inside that iframe and also that there are elements present in the BODY, then we know for sure that it’s loaded (otherwise you can get a fake body in chrome).

I made a quick prototype here: http://jsfiddle.net/pfg3B/

It goes something like:

// 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
});

Select the iframe BODY element on the lightbox call

4 Answers4