CODEWITHSUNDEEP
javascriptjquerydomiframedocument
Ilja
Ilja

Reputation: 46547

Make document.ready take into account elements from external iframe

The position I find my self in is the following. I have a jQuery plugin which needs to be nested within the document.ready function. This plugin applies some styling to elements of the page. One of elements affected by this plugin contains an iframe. This iframe is not from my website. The issue is that document.ready doesn't take into account contents of iframe, and when it gets loaded it's height changes, but jQuery plugin was already applied before this, therefore layout of the page is screwed up.

I tried the following to make sure plugin get's called only if document is ready and iframe is ready as well:

$(document).ready(function() {
    $('#frameId').ready(function() {
    //plugin code
    });
});

But this doesn't work and I'm looking for another solution.

Upvotes: 1

Views: 170

Answers (2)

Khanh TO
Khanh TO

Reputation: 48992

The solution is $.holdReady();

$.holdReady(true);
$(document).ready(function() {
    //plugin code
});

$('#frameId').on('load', function() {
   $.holdReady(false);
});

For accessing the height of cross-domain iFrame contents, you need the postMessage. Check out this post

Upvotes: 0

adeneo
adeneo

Reputation: 318362

Only the document has a ready() event, for iFrame's it would be onload :

$(document).ready(function() {
    $('#frameId').on('load', function() {
    //plugin code
    });
});

But why does your plugin require access to an iFrame ?

Upvotes: 1

Related Questions