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 get が展開されると、Facebook のコメントの下にあるはずのないスペースがたくさんあります。jquery 関数は Facebook の iframe の高さを認識していないため、これが原因だと思います。この問題を解決できる解決策/変更を提案していただけますか?

ここで問題を確認できます: http://inelmo.com/inelmo (投稿の下にあるいくつかのコメント リンクをクリックして、非表示の div を開きます)。

注:いくつかのブラウザーでテストしました。FireFox は正常に動作します。Chrome、Safari、および IE に問題があり、Opera については不明です。

4

1 に答える 1

2

これは少しハックかもしれませんが、うまくいくはずです。(テストできません)。

問題は、何らかの理由で iframe がその高さを必要以上に約 400px 大きくしていると判断しているようです。これはフェイスブックの問題かもしれません。

あなたができることは、ページロード時に iframe の高さを手動で「自動」に設定することです。

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

これをテストすることはできませんが、クロムでDOMを編集する概念の証明があります。

---以下のコードを編集---

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

iframe の高さをコンテンツの高さに設定することで問題が解決することを願っています。繰り返しますが、上記でどのようになるかはわかりません。auto プロパティは、通常の html 要素のように iframe を拡張してそのコンテンツに一致させないようです。コメント クリック イベントにコードを保持します。

これにより、iframe のコンテンツが変更されたときに (誰かがコメントを追加したときにバインドされているため)、iframe が拡張されないという別の問題が発生する可能性があると思います。そのため、iframe の内容を常に監視し、iframe 自体に適用する必要がある段階になりました。これは複雑すぎるように思えますが、これ以上簡単な方法は思いつきません。

iframe をコンテンツに合わせて拡張するより賢い方法を誰かが持っていないかどうかを簡単に検索しましたが、それを見ることができませんでした。しかし、私たちが調べた今、それがあなたの本当の質問であるようです.

于 2011-11-05T10:39:29.280 に答える