TJ_*_*her 6 html javascript css iframe facebook-iframe
我正在编写一个加载页面的Web应用程序,然后使用javascript显示使用Facebook的XFBML代码的Facebook评论框.我在一个容器中有Facebook注释iframe,在页面加载时设置为"display:none".稍后当用户点击按钮时,将显示容器.
我遇到的问题是,当页面加载Facebook Comments容器设置为"display:none"时,Facebook加载的iframe的高度远远大于预期的高度.但是,如果我加载页面并将Facebook Comments容器设置为"display:block",然后在页面加载后将其设置为"display:none",则iframe将获得正确的height属性.我很好奇是什么原因造成了iframe高度设置的差异.
我的解决方法是加载页面,将容器的样式设置为'display:block; 身高:1px; 宽度:1px; border:none'然后在页面加载后使用javascript将容器设置为'display:none'.我只是好奇是什么导致了这个,如果有一个比我正在做的更好的解决方法.
任何人都可以解释这种现象,并告诉我建议的解决方案是什么？
供您参考,下面是我的标记的简化版本,没有解决方法.如果您在浏览器中加载它并单击"显示注释"按钮,您将看到大的灰色区域,它是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>
我不能确定，但也许display: none;可以通过忽略height:属性 \xe2\x80\x93\xe2\x80\x93 来起作用，即使您可能已经设置了高度，display: none;覆盖它（就像display: inline;某些覆盖高度一样）。
我建议使用 CSS display: none;，作为没有 JS 的用户的后备，
#facebook-comments { display: none; }\ndisplay: block;然后用JS覆盖
<script>\n var commentContainer = document.getElementById('facebook-comments');\n commentContainer.style['display'] = 'block';\n\n function showComments(e){\n ...\n }\n</script>\n在加载您的 Facebook 评论之前。一旦 iframe 加载完毕，就在 之前</body>，再次隐藏 div：
<script>\n var commentContainer = document.getElementById('facebook-comments');\n commentContainer.style['display'] = 'none';\n</script>\n也许不是最简单的方法，但它应该有效。
\n\n干杯!
\n