如何使用 jQuery 和 Disqus 注释系统为 div 布局设置等高

Question

我有一个基于 div 的布局，并使用 jQuery 和“setEqualHeights”函数（如下）使布局中的所有列相等。

Equal Heights jQuery：

function setEqualHeight(columns) 
{
    var tallestcolumn = 0;
    columns.each(
    function() 
     {
          currentHeight = $(this).height();
          if(currentHeight > tallestcolumn) 
          {
                tallestcolumn = currentHeight;
          }
    }
    );
    columns.height(tallestcolumn);
}

$(window).load(function() {
    setEqualHeight($(".coln_equalize"));
});

HTML 会是这样的：

<div id="wrap">

  <div id="nav-coln" class="coln_equalize">
  ... navigation ...
  </div>

  <div id="content" class="coln_equalize">
  ... content ...
  </div>

</div>

setEqualHeights 工作正常，直到我将 Disqus 添加到混合中。

它似乎是异步加载的，导致布局的高度分解并且不再相等。

Disqus 的 HTML 代码：

<div id="wrap">

  <div id="nav-coln" class="coln_equalize">
  ... navigation ...
  </div>

  <div id="content" class="coln_equalize">

      ... content ...

      <div id="disqus_thread">
        ... disqus stuff ...
      </div>

  </div>

</div>

有时我刷新一下就没事，有时刷新一下又坏了。 另外，当我添加新评论并且该新评论出现在页面上（从而增加更多高度）时，布局再次中断。

我的猜测是 setEqualHeights 是在 Disqus 完全完成加载之前应用的。新评论添加了更多未知的高度变量，这也无济于事。

有没有办法在应用 setEqualHeights 之前强制 Disqus 完全完成加载？

尝试的解决方案#1（但失败了）：仅在 Disqus 完全加载后加载 setEqualHeights 函数

我已经搜索了类似的问题，到目前为止我想出了这个线程： 获取等高列 jQuery 插件和 Disqus 进行播放很好

但是“解决方案”（或缺乏解决方案）对我来说不起作用。有人提到了一种方法来强制 Disqus 在应用高度函数之前完成加载......但当我尝试代码时它不起作用。

我将我的尝试粘贴在下面：

function setEqualHeight(columns) 
{
    var tallestcolumn = 0;
    columns.each(
    function() 
     {
          currentHeight = $(this).height();
          if(currentHeight > tallestcolumn) 
          {
                tallestcolumn = currentHeight;
          }
    }
    );
    columns.height(tallestcolumn);
}

(function() {
var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
dsq.src = 'http://escapology.disqus.com/embed.js';
var done=false;
dsq.onload=dsq.onreadystatechange = function(){
      if ( !done && (!this.readyState || this.readyState == 'loaded' || this.readyState == 'complete') ) {
        done=true;
        //CALL YOUR EQUAL HEIGHTS JQUERY CODE HERE
            $(window).load(function() {

                $(document).ready(function() {
                    setEqualHeight($(".coln_equalize"));
                });

            });
        // (END) CALL YOUR EQUAL HEIGHTS JQUERY CODE HERE
        dsq.onload = dsq.onreadystatechange = null;
      }
    };
(document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
})();

尝试的解决方案#2（也失败了）：使用 jQuery 获取 Disqus 块的高度，然后使用 jQuery 将其添加为 CSS 高度参数

然后我想我可能会使用更简单的方法脚本将获取 Disqus 的高度，并使用 jQuery 将其应用为 CSS。 为此，我插入了以下代码来代替“//CALL YOUR EQUAL HEIGHTS JQUERY CODE HERE”块：

$(window).load(function(){
          var dynamic_height = $('div#disqus_thread').height();
          $('div#disqus_thread').css({'height':dynamic_height+'px'});
});

但是，我再次相信此尝试会失败，因为它也在 Disqus 完全完成加载之前应用，并且也失败了因为它捕捉不到新的 添加新评论的高度。

任何帮助将不胜感激！