Facebook页面嵌入iframe不填充容器宽度

Question

我添加了一个维基百科的 iframe 来演示我遇到的问题。
Wiki iframe 可以正常显示，但 facebook iframe 却没有。

HTML：

   <div class="iframe-fb-container mt-4">
      <iframe class="iframe-fb" width="450" height="700" style="border:1px solid black;overflow:hidden" scrolling="yes" frameborder="0" allowTransparency="true" allow="encrypted-media" src="https://www.facebook.com/plugins/page.php?href=https://www.facebook.com/Microsoft/&tabs=timeline%2Cevents%2Cmessages&width=450px&height=700px&small_header=false&adapt_container_width=true&hide_cover=false&show_facepile=true&appId=2235597906716847"></iframe>
      <iframe class="iframe-fb" width="450" height="700" style="border:1px solid black;overflow:hidden" scrolling="yes" frameborder="0" allowTransparency="true" allow="encrypted-media" src="https://fr.wikipedia.org/wiki/Main_Page"></iframe>
   </div>

CSS：

.iframe-fb-container {
    border: 1px solid blue;
 }

 .iframe-fb {
    width: 100%;
    }

如您所见，我向 facebook 询问宽度为 450px 的 iframe，在附加的图片中，模拟器的宽度为 375px，但 fb iframe 仍然没有不要像 wikipedia iframe 那样填充它的容器。

如何让 fb iframe 填充它的容器？

Answer 1

你不能以正常的方式做到 100%。

这是你的 iframe 源代码：

https://www.facebook.com/Microsoft/&tabs=timeline%2Cevents%2Cmessages&width=450px&height=700px&small_header=false&adapt_container_width=true&hide_cover=false&show_facepile=true&appId=2235597906716847"></iframe>

注意有参数：width=450px。

将 iframe 内容的宽度设置为 450px。

根据Facebook Plugin documentation：

The pixel width of the plugin. Min. is 180 & Max. is 500.

所以 Facebook 可以得到的最大宽度是 500。

Answer 2

Facebook 在Page Plugin site 上声明

默认情况下，该插件会在页面加载时适应其父容器的宽度（最小 180 像素/最大 500 像素），对于更改布局很有用

和

无动态调整大小 页面插件适用于响应式、流体和静态布局。您可以使用媒体查询或其他方法来设置父元素的宽度，但是： 该插件将在页面加载时确定其宽度 页面加载后，它不会对盒子模型的更改做出反应。 如果你想在调整窗口大小时调整插件的宽度，你需要手动重新渲染插件。

所以我认为您最好的选择是尽可能地填充父级的宽度（最多 500 像素限制），然后将其居中在父级中。 如果您尝试使用 facebook 设置的 CSS，它会开始显示不正确，例如帖子没有填满时间线。

Answer 3

Facebook 的 Page Plugin 它不能用作响应式容器，您必须根据 @ 将宽度从 最小 180px 添加到 最大 500px 987654321@.

你也可以看看其他的答案，希望对你有所帮助。谢谢

Responsive width Facebook Page Plugin

Answer 4

在facebook bug platform 询问后，我从他们那里得到了这个答案，这有助于一劳永逸地解决这个问题：

正如stackoverflow中其他人已经回答的那样，根据 文件， https://developers.facebook.com/docs/plugins/page-plugin/，你可以 指定插件的宽度，但是 "100%" 不是什么东西 支持。

除非您针对代码中的错误引用它们，否则来自 facebook 文档的引用无济于事，文档如下：

插件的像素宽度。分钟。是 180 和最大。是 500

这并不是说不支持父容器的 100% 宽度！
唯一接近弄清楚的答案是 Alon 的，这就是他获得赏金的原因。

所以最终这是我最终得到的代码：

HTML：

 <div class="iframe-fb-container">
   <iframe class="iframe-fb border" scrolling="no" frameborder="0" allowTransparency="true" allow="encrypted-media" src="https://www.facebook.com/plugins/page.php?href=https%3A%2F%2Fwww.facebook.com%2FGringo.co.il%2F&tabs=timeline&width=400&height=700&small_header=false&adapt_container_width=true&hide_cover=false&show_facepile=true&appId=2235597906716847"></iframe>
 </div>

CSS：

.iframe-fb-container {
    text-align: center;
    width:400px;
    height:700px;
    display:inline-block;
}

.iframe-fb {
    width: 400px;
    height: 700px;
    overflow: hidden;
}

我希望这个答案对将来的人有所帮助:)

Answer 5

jQuery 解决方案怎么样？

jQuery(window).on("load resize", function () {
  jQuery('iframe[src*="facebook.com"]').each(function () {
    /* get width of parent element */
    var width = Math.round(jQuery(this).parent().width());
    if (width > 500) {
      width = 500;
    } else if (width < 180) {
      width = 180;
    }

    /* replace width value in iframe src */
    var src = new URL(jQuery(this).attr("src"));
    src.searchParams.set("width", width);

    /* append new width */
    jQuery(this).attr("src", src);
    jQuery(this).attr("width", width);
  });
});

此脚本获取父元素的宽度并相应地调整 iframe。

Answer 6

因为 _2p3a 和 uiScaledImageContainer _2zfr 占用宽度：450px；这就是 facebook iframe 无法正确显示的原因。

Answer 7

请提供 100% 的 iframe 宽度。 :)

iframe{
  width: 100% !important  //important if not working without it..
}