1

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

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

问题是客户希望我们将 Disqus 评论放在与单个帖子相同的 div 中。不幸的是，Isotope 和 Disqus 不能很好地配合使用 - 发生的情况是 Isotope 在 Disqus 加载的 iFrame 完成加载之前布局页面，在此过程中破坏了布局。我可以很容易地通过运行重新布局页面$('#isotope').isotope('reLayout');，但我很难找到触发它的好方法。

一旦页面上的所有 iframe 都完成加载，我需要触发它。Disqus 使用 JavaScript 动态插入 iframe 元素，所以我认为使用以下方法可以解决问题：

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

但是，这永远不会触发。

我整理了一个jsFiddle，展示了我想要做的事情。

谁能看到我哪里出错了？

4

2 回答 2

0

如果 iframe 来自外部域，那么由于跨域规则，您不能这样做（您将无法绑定到 iframe 的某些事件）

但是，就您的布局问题而言，如果您设计的布局使得 iframe 始终是具有定义宽度和高度的固定大小，那么 iframe 不会在内容加载时影响布局（尽管我很惊讶它确实首先，我不认为 iframe 会自行调整大小）

于 2013-05-13T11:40:03.967 回答
0

我遇到了同样的问题。所以我认为，每当加载 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/来检测调整大小。

于 2015-11-20T03:40:30.443 回答