Question

我目前在Tumblr主题上遇到了Disqus的问题。

主题本身使用同位素（如果你不熟悉它本质上是一个更有特色的付费版本的Masonry），并且有一个Disqus集成。

问题是客户希望我们将Disqus评论放在与各个帖子相同的div中。不幸的是，Isotope和Disqus不能很好地结合在一起 - 会发生的是Isotope在LLC加载的iFrame完成加载之前布局页面，在此过程中弄乱了布局。我可以通过运行$('#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');
      }
});

P.S：我使用http://benalman.com/projects/jquery-resize-plugin/来检测调整大小。

使用jQuery触发iframe加载

2 个答案: