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

这似乎是 Disqus 在隐藏的 DIV 中初始化的一个相对常见的问题。如果您查看 DOM，Disqus 的 javascript 代码拉入您的 div 的 iframe 的高度为 0px，而在 chrome 和其他浏览器中，当没有要显示的评论时，它的高度为 327px。

对我有用的一个 hacky 解决方法是在 Disqus iframe 块上使用 CSS min-height 修复，无论是在您的 CSS 中还是在 jQuery document.ready 块中：

<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 回答
1

我找到了另一种方法来修复它，方法是将 toomanyredirects 的解决方案与 Disqus API 提供的 onReady 回调函数（http://www.electrictoolbox.com/running-javascript-functions-after-disqus-loaded/）

所以这是我正在使用的代码（在 Disqus 配置变量中声明）：

disqus_config = function() {
    this.callbacks.onReady = [function() {
        $('#disqus_thread iframe').css({
            'height': '327px',
            'height': 'auto !important',
            'min-height': '327px'
        });
    }];
};
于 2013-06-10T08:57:54.040 回答