Question

此问题仅出现在Firefox 14.0.1中（我无法在任何其他浏览器中重现它）。如果您将Disqus评论的代码放在隐藏的元素中并且等待所有内容完全加载，然后使用JavaScript显示元素，则会显示注释框和注释。但是，如果您调整窗口大小，它将立即显示。它在最新版本的谷歌浏览器和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>

我可以发布一个实际示例的链接，但我不确定在Stack Overflow上发布链接的政策。

Answer 1

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

对我有用的hacky解决方法是在CSS iframe中使用CSS min-height修复，无论是在CSS中还是在jQuery文档中。已经阻止：

<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>

Answer 2

这不能解决我的问题。我找到了另一种解决方法，将toomanyredirects的解决方案与Disqus API（http://www.electrictoolbox.com/running-javascript-functions-after-disqus-loaded/）提供的onReady回调函数混合起来

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

disqus_config = function() {
    this.callbacks.onReady = [function() {
        $('#disqus_thread iframe').css({
            'height': '327px',
            'height': 'auto !important',
            'min-height': '327px'
        });
    }];
};

Answer 3

我在jQuery-ui选项卡中嵌入了类似的问题。我能够在FF和IE9中产生错误。 Chrome工作正常。

我联系了Disqus但尚未收到回复。

Answer 4

我遇到了完全相同的问题。我的评论Disqus框是隐藏的，并且在.click()按钮上应该显示它。除了Firefox之外，它在所有功能上都可以该死！

在隐藏元素中初始化Disqus注释会导致FF 14.0.1中出现问题

4 个答案: