用jQuery觸發iframe加載

我在Tumblr主題中遇到了與Disqus有關的問題。用jQuery觸發iframe加載

該主題本身使用同位素（如果你不熟悉它本質上是一個更具特色，付費版本的砌體），並與Disqus整合。

問題是客戶希望我們將Disqus評論放置在與各個帖子相同的div內。不幸的是，同位素和Disqus不能很好地協同工作 - 會發生什麼情況是，Isotope在加載Disqus的iFrame完成加載之前展開頁面，從而破壞了過程中的佈局。我可以很容易地通過運行$('#isotope').isotope('reLayout');來重新排版頁面，但我很難找到觸發它的好方法。

一旦頁面上的所有iframe都完成加載，我需要觸發它。 Disqus使用JavaScript動態地插入iframe元素，所以我認爲使用以下方法可以做到這一點：

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

但是，這從來沒有被觸發。

我已經放在一起jsFiddle展示我想做的事情。

任何人都可以看到我去的地方是哪裏？

來源

2013-05-13 Matthew Daly

這是因爲在iframe中發生的事件沒有在父元素內傳播。然而[這]（http://jsfiddle.net/arunpjohny/7cJHb/1/）的作品，因爲事件被添加到iframe本身 – 2013-05-13 11:40:05

如果iframe是從外部域，那麼你不能這樣做，由於跨域規則（你將不能夠綁定到iframe的某些事件）

但是至於你佈局的問題是，如果你設計的佈局，使iframe始終是一個固定的大小與定義的寬度和高度，然後iframe不會影響內容加載佈局（雖然我很驚訝它首先，我不認爲內置頁框自己調整大小）

來源

2013-05-13 11:40:03 PhonicUK

乾杯。我曾半信半疑地從我通過谷歌發現的信息中聽到了這一消息，但我並不十分確定。我已經採取了在包含iframe的div上設置最小高度，並使用延遲5秒後重新佈局同位素，並且這似乎相當可靠地工作。 – 2013-05-13 11:51:11

@MatthewDaly我也在研究這個問題。這是你最終的解決方案，5秒後手動觸發同位素？ – 2015-02-27 20:25:32

@DrunkenMaster是的，這就是我最後的結果 – 2015-02-28 07:24:41

我有同樣的問題。所以我認爲，無論何時加載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'); 
     } 
});

P.S：我以前http://benalman.com/projects/jquery-resize-plugin/檢測調整大小。

來源

2015-11-20 03:40:30 mshahbazm

用jQuery觸發iframe加載

回答

相關問題