Javascript 如何使facebook评论框宽度达到100%？

我用这个代码在我的页面上放一个facebook评论框

<script type="text/javascript">
 (function(d, s, id) 
 {
 var js, fjs = d.getElementsByTagName(s)[0];
 if (d.getElementById(id)) return;
 js = d.createElement(s); js.id = id;
 js.src = "//connect.facebook.net/en_US/all.js#xfbml=1&appId=397337283630353";
 fjs.parentNode.insertBefore(js, fjs);
 }(document, 'script', 'facebook-jssdk'));
 </script>


<div class="fb-comments" data-href="https://apps.facebook.com/driftee/" data-num-posts="5" data-width="470" data-colorscheme="dark" style="width: 100% !important;"></div>

（功能（d、s、id）
{
var js，fjs=d.getElementsByTagName[0]；
if（d.getElementById（id））返回；
js=d.createElement；js.id=id；
js.src=“//connect.facebook.net/en_US/all.js#xfbml=1&appId=397337283630353”；
fjs.parentNode.insertBefore（js，fjs）；
}（文档“脚本”、“facebook jssdk”）；

---

但是我不能让评论框占满页面的100%。

您可以通过在HTML页面的样式表中添加CSS类来做到这一点，如下所示：

.fb-comments, .fb-comments span, .fb-comments iframe { width: 100% !important; }

---

尝试添加参数

data width=“{pixels}”

，这是在该页面上创建代码时得到的，也就是说，如果您知道以像素为单位的页面宽度。我不知道它是否也适用于百分比，但不知怎的，我怀疑它

---

那么您的最后一个选择可能是添加resp。加载页面后，动态修改该参数，可以读取实际宽度（以像素为单位），并在加载脚本时将XFBML参数设置为false，然后在设置数据宽度参数后调用。当然，如果用户调整浏览器窗口的大小后修改了宽度，或者…

我想我已经解决了这个问题， 我分析了注释框，发现fb comments div包含一个默认宽度为470px的范围，在这个范围内我发现了一个相同宽度的iframe，因此解决方案是使用jquery更改窗口大小调整时的范围和iframe宽度，如下所示：

$(window).resize(function(){$('.fb-comments iframe,.fb-comments span:first-child').css({'width':$('#commentboxcontainer').width()});});

---

因此，现在在“调整窗口大小”上，整个评论框采用了容器宽度（通过其他方式，它是100%宽度）。

zeeshan您的解决方案似乎过时了，看起来facebook更新了他们的插件，打破了这种风格

也许到目前为止，这对我来说效果更好，我相信当facebook更新他们插件的工作方式时，这种风格将再次被打破

.fb_iframe_widget,
.fb_iframe_widget span,
.fb_iframe_widget iframe[style]  {width: 100% !important;}

我鼓励其他贡献者在时机成熟时为这个问题添加更新的解决方案

.fb_iframe_widget,
.fb_iframe_widget > span,
.fb_iframe_widget iframe {
    width: 100% !important;
}

---

这对我来说很管用

使用jQuery，你可以在加载Facebook评论框之前覆盖硬编码的宽度

$('document').ready(function(){
    $('.fb-comments').attr('data-width',$('body').width());
});

---

p.s.您可以将“body”替换为您希望注释框匹配的任何其他元素。

我尝试了其他解决方案，但没有一种适合我

阅读fb文档时，我发现已经支持宽度100%，将attribute data width=“100%”添加到标记中：

---

它现在正在工作，根据它在移动设备上的文档，此设置是自动设置的。

这相当简单 在你的代码上

添加以下代码数据宽度=“100%”

---

还是一样，我用了这个.fb comments.fb comments iframe{width:100%！important；}但是同样的。div宽度为100%，但评论框仍在550px左右。这对

Facebook评论框不起作用。其他解决方案对我不起作用，但这个解决方案对我起作用了！“iframe[style]”是做什么的？这与上一行中的“iframe”有何不同？感谢您提供此解决方案。

setTimeout(function run() {
    if ($('.fb-comments span:first-child, .fb-comments span iframe').length == 0)
        setTimeout(run, 1000);
    else
        $('.fb-comments span:first-child, .fb-comments span iframe')[1].style.width = "100%";
}, 1000);