2

この問題は Firefox 14.0.1 でのみ発生します (他のブラウザーでは再現できませんでした)。Disqus コメントのコードを非表示の要素内に配置し、すべてが完全に読み込まれるまで待ってから、JavaScript を使用して要素を表示すると、コメント ボックスもコメントも表示されません。ただし、ウィンドウのサイズを変更すると、すぐに表示されます。ただし、最新バージョンの Google Chrome と Safari では問題なく動作します。

これは何が原因で、どのように修正するのですか?

再現するサンプルコード:

<div id="test" style="display:none;">
<div id="disqus_thread"></div>
<script type="text/javascript">
    /* * * CONFIGURATION VARIABLES: EDIT BEFORE PASTING INTO YOUR WEBPAGE * * */
    var disqus_shortname = 'onlinefunctions'; // required: replace example with your forum shortname

    /* * * DON'T EDIT BELOW THIS LINE * * */
    (function() {
        var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
        dsq.src = 'http://' + disqus_shortname + '.disqus.com/embed.js';
        (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
    })();
</script>
<noscript>Please enable JavaScript to view the <a href="http://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>
<a href="http://disqus.com" class="dsq-brlink">comments powered by <span class="logo-disqus">Disqus</span></a>
</div>
<a href="#" onclick="document.getElementById('test').style.display = 'block'">show</a>
4

2 に答える 2

3

これは、非表示の DIV で Disqus を初期化する場合に比較的よく見られる問題のようです。DOM を見ると、Disqus の JavaScript コードが div に取り込む iframe の高さは 0px ですが、chrome やその他のブラウザーでは、表示するコメントがない場合の高さは 327px です。

私にとってうまくいくちょっとした回避策は、CSS または jQuery document.ready ブロック内のいずれかで、Disqus iframe ブロックで CSS min-height fix を使用することです。

<div id="my-disqus-block">
  <script type="text/javascript">
    // Normal Disqus embed code       
    var disqus_shortname = 'my_disqus_username'; // required: replace example with your forum shortname

    (function() {
      var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
      dsq.src = 'http://' + disqus_shortname + '.disqus.com/embed.js';
      (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
    })();

    // Fix for Disqus box height in hidden Firefox
    $(document).ready(function() {
      $('#my-disqus-block iframe').css({
        'height': '327px',
        'height': 'auto !important',
        'min-height': '327px'
      });
    });
  </script>
  <noscript>Please enable JavaScript to view the <a href="http://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>
  <a href="http://disqus.com" class="dsq-brlink">comments powered by <span class="logo-disqus">Disqus</span></a>
</div>
于 2013-02-14T14:28:42.667 に答える