使用jQuery触发iframe加载

Question

I've got an issue with Disqus on a Tumblr theme at present.

The theme itself uses Isotope (if you're not familiar it's essentially a more featureful, paid version of Masonry), and has Disqus integration.

The issue is that the client wants us to place the Disqus comments inside the same div as the individual posts. Unfortunately, Isotope and Disqus don't play well together - what happens is that Isotope lays out the page before the iFrame that Disqus loads in has finished loading, mucking up the layout in the process. I can quite easily re-layout the page by running $('#isotope').isotope('reLayout'); , but I'm having trouble finding a good way of triggering it.

I need to trigger it once all the iframes on the page have finished loading. Disqus uses JavaScript to insert the iframe elements dynamically, so I thought using the following would do the trick:

$('body').on('load', 'iframe', function () {
    // Do stuff here
});

However, this is never triggered.

I've put together a jsFiddle demonstrating the kind of thing I want to be able to do.

Can anyone see where I went awry?

Answer 1

If the iframe is from an external domain then you can't do that due to cross-domain rules (you won't be able to bind to certain events of the iframe)

However as far as your layout issue goes, if you designed your layout such that the iframe was always a fixed size with a defined width and height then the iframe won't affect the layout as the content loads (although I'm surprised it does in the first place, I didn't think iframes resized themselves)

Answer 2

I was having same issue. So I figured that whenever iframe is loaded it increases the height of its parent element, ie its wrapper, and we can detect when an element is resized , Here is what I did.

$("your_ifram_wrap").on("resize",function() {
      var $this = $(this);
      if($this.find("iframe").length && $isotopeSelector.length){
           $isotopeSelector.isotope('layout');
      }
});

PS: I used http://benalman.com/projects/jquery-resize-plugin/ to detect resize.