0

我在我的网站上使用 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 评论 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>

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

<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 评论下会有很多空间不应该存在，我猜这是由于 jquery 函数不知道 facebook iframe 的高度。您能否建议任何可以解决此问题的解决方案/修改？

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

NOTE: I tested it in several browsers, FireFox works normaly, the problems are present in chrome, safari and IE, not sure about opera.

4

1 回答 1

2

This might be a bit hacky, but it should work. (Unable to test).

The problem seems to be that your iframe is deciding its height is around 400px more than it needs to be for some reason. This might be a facebook issue.

What you could do is manually set the height of the iframe to "auto" at pageload.

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

I'm unable to test this, but have proof of concept editing DOM in chrome.

---Edited Code Below---

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

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

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

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

于 2011-11-05T10:39:29.280 回答