使用jQuery觸發iframe加載

Question

我目前在Tumblr主題上與Disqus有關的問題。

主題本身使用同位素（如果您不熟悉，它本質上是功能更強大的付費石工版本），並且具有Disqus集成。

問題是客戶希望我們將Disqus評論添加到與各個帖子相同的div中。 不幸的是，Isotope和Disqus不能很好地配合使用-發生的事情是Isotope在Disqus加載的iFrame完成加載之前對頁面進行了布局，從而在此過程中造成了布局混亂。 我可以通過運行$('#isotope').isotope('reLayout');輕松地重新布局頁面$('#isotope').isotope('reLayout'); ，但我很難找到觸發它的好方法。

頁面上的所有iframe完成加載后，我需要觸發它。 Disqus使用JavaScript來動態插入iframe元素，所以我認為使用以下方法可以解決問題：

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

但是，這永遠不會觸發。

我整理了一個jsFiddle，演示了我想做的事情。

誰能看到我去哪里了？

Answer 1

如果iframe來自外部域，則由於跨域規則，您將無法執行此操作（您將無法綁定到iframe的某些事件）

但是，就布局問題而言，如果您設計布局時使iframe始終是具有定義的寬度和高度的固定大小，則iframe不會隨着內容加載而影響布局（盡管我很驚訝首先，我不認為iframe會自行調整大小）

Answer 2

我有同樣的問題。 因此，我發現無論何時加載iframe，它都會增加其父元素（即包裝器）的高度，並且we can detect when an element is resized ，這就是我所做的。

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

PS：我使用http://benalman.com/projects/jquery-resize-plugin/來檢測調整大小。