如何修改以下 jQuery 函数来检测 iframe 高度？

Question

我在我的网站上使用 facebook 评论插件。它隐藏在一个 div 中。

<div style="display: none" id=cmbx(id) class="comentBox">

  <div class="fb-comments" data-href="mywebsite.com(id)" data-num-posts="5" data-width="520"></div>  

</div> 

这是 facebook cmets javascrip 部分

<div id="fb-root"></div>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) {return;}
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/en_US/all.js#xfbml=1&appId=143512332326919";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

有一个 jquery 函数显示隐藏的 .commentBox div，一旦点击以下链接，它就会午餐

<a class="st_commentsa" href="#" onClick="return false" onMousedown="javascript:toggleSlideBox(\'cmbx(id)\');">Comments</a>

这是一个 jQuery 函数

function toggleSlideBox(x) {
    if ($('#' + x).is(":hidden")) {
        $(".comentBox").slideUp(200);
        $('#' + x).slideDown(200)
    } else {
        $('#' + x).slideUp(200)
    }
}

---

问题如下。一旦隐藏的 div 得到扩展，facebook cmets 下会有很多空间不应该存在，我猜这是造成的，因为 jquery 函数不知道 facebook iframe 的高度。你能建议任何 可以解决此问题的解决方案/修改？

您可以在这里自己查看问题：http://inelmo.com/inelmo（点击帖子下的几个 cmets 链接以打开隐藏的 div。）

注意：我在几个浏览器中测试过，FireFox 工作正常，问题出现在 chrome、safari 和 IE 中，不确定 Opera。

Answer 1

这可能有点老套，但应该可以。 （无法测试）。

问题似乎是你的 iframe 决定它的高度比它需要的高大约 400px 出于某种原因。这可能是 Facebook 的问题。

您可以在页面加载时手动将 iframe 的高度设置为“自动”。

$(document).ready(function() {
   $(".fb-comments iframe").css("height", "auto");
});

我无法对此进行测试，但有在 chrome 中编辑 DOM 的概念证明。

---下面的编辑代码---

$(".fb-comments iframe").css("height", function() {
    $(this).contents().find("body").height();
});

希望这将通过将 iframe 高度设置为其内容的高度来解决问题。同样，不知道上面的结果会如何。 auto 属性似乎没有像普通的 html 元素那样扩展 iframe 以匹配其内容。 将代码保留在 Comment Click 事件中。

我认为这可能会导致另一个问题，即当 iframe 的内容发生变化时（因为当有人添加评论时它们必然会发生变化），iframe 不会扩展。所以我们现在已经到了必须不断监控 iframe 的内容并将它们应用到 iframe 本身的阶段，这似乎太复杂了，但我想不出更简单的方法。

我快速搜索了一下，看看是否有人有更聪明的方法来扩展 iframe 以匹配其内容，但看不到。但这似乎是您现在真正的问题，因为我们已经对其进行了调查。