6

我正在编写一个加载页面的 Web 应用程序，然后使用 javascript 使用 Facebook 的 XFBML 代码显示 Facebook 评论框。我在一个容器中有 Facebook 评论 iframe，该容器在页面加载时设置为“显示：无”。稍后，当用户单击按钮时，将显示容器。

我遇到的问题是，当页面加载时 Facebook 评论容器设置为“显示：无”，Facebook 加载的 iframe 的高度远大于预期。但是，如果我加载页面时将 Facebook 评论容器设置为“显示：块”，然后在页面加载后将其设置为“显示：无”，则 iframe 将获得正确的高度属性。我很好奇是什么导致了 iframe 高度设置的这种差异。

我的解决方法是加载页面，将容器的样式设置为'display: block; 高度：1px；宽度：1px；边框：无”，然后在页面加载后使用 javascript 将容器设置为“显示：无”。我只是好奇是什么原因造成的，以及是否有比我正在做的更好的解决方法。

谁能解释这种现象并告诉我建议的解决方案是什么？

供您参考，下面是我的标记的简化版本，但没有适当的解决方法。如果您在浏览器中加载它并单击“显示评论”按钮，您将看到大的灰色区域，它是 Facebook 评论容器，比实际评论框大得多。

<!DOCTYPE html>
<html>
    <head>
        <title>Facebook Commments Page</title>
        <style type="text/css">
            .initial-content { width: 100%; overflow: hidden; }
            .show-comments-button { float: left; background: #aaa; padding: 6px;}
            #facebook-comments { display: none; background: #eeeeee; }
        </style>
        <script>
            function showComments(e){
                var commentContainer = document.getElementById('facebook-comments');
                commentContainer.style['display'] = 'block';
            }
        </script>
    </head>
    <body>
        <div class="initial-content">
            <h1>My little web app</h1>
            <p>Here is the content a user sees when first loading the page.</p>
            <div class="show-comments-button" onclick="showComments(event);">Show Comments</div>
        </div>
        <div id="facebook-comments">
            <h1>Facebook Comments</h1>
            <div id="fb-root"></div><script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script><fb:comments href="example.com" num_posts="2" width="500"></fb:comments>
        </div>
    </body>
</html>
4

1 回答 1

1

我不能确定，但​​也许display: none;通过忽略height:属性来起作用——即使你可能已经设置了高度，display: none;覆盖它（就像display: inline;某些覆盖高度一样）。

我建议使用 CSSdisplay: none;作为没有 JS 的用户的后备，

#facebook-comments { display: none; }

display: block;然后用 JS覆盖

<script>
    var commentContainer = document.getElementById('facebook-comments');
    commentContainer.style['display'] = 'block';

    function showComments(e){
        ...
    }
</script>

在加载您的 Facebook 评论之前。一旦 iframe 加载完毕</body>，就在 之前，再次隐藏 div：

<script>
    var commentContainer = document.getElementById('facebook-comments');
    commentContainer.style['display'] = 'none';
</script>

也许不是最简单的方法，但它应该工作。

干杯!

于 2011-07-06T19:58:24.133 回答