Execute jQuery once document is ready AND iframe content is loaded

Question

As you can see on this page http://musicglaze.com/chase-status-let-you-go-feat-mali-feed-me-remix/#comments
comment section is way out of place, After research I understood that it is caused because plugin responsible for styling (http://masonry.desandro.com/) is called within

$(document).ready(function(){

});

function. however, content is loaded into iframe after that, therefore changing its height, but as plugin takes into account its original height without content everything gets messed up. Is there something I can use which would behave similar to this pseudocode?

Document ready AND iframe content loaded {

//My jQuery code

}

Answer 1

Use $('#iframeId').load(function() { ... }); instead of onReady. The underlying issue is that there are cross-domain security risks to allowing the parent frame access to an iframe's content, so onReady is not available, but onLoad is still accessible. For more details, see: http://www.nczonline.net/blog/2009/09/15/iframes-onload-and-documentdomain/

Answer 2

same ready() function

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