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 仍然没有像维基百科 iframe 那样填充它的容器。

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

Answer 1

请给出 100% 的 iframe 宽度。 :)

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

Answer 2

你无法以正常方式做到 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 3

Facebook 在 Page Plugin site

上声明

The plugin will by default adapt to the width of its parent container on page load (min. 180px / max. 500px), useful for changing layout

和

No Dynamic Resizing The Page plugin works with responsive, fluid and static layouts. You can use media queries or other methods to set the width of the parent element, yet: The plugin will determine its width on page load It will not react changes to the box model after page load. If you want to adjust the plugin's width on window resize, you manually need to rerender the plugin.

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

Answer 4

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

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

Answer 5

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

Answer 6

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

As already answered by other people in Whosebug, according to the documentation, https://developers.facebook.com/docs/plugins/page-plugin/, you can specify the width for the plugin, however, "100%" is not something supported.

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

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

不是说不支持父容器100%宽度！
唯一接近解决问题的答案是阿隆的答案，这就是他获得赏金的原因。

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

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 7

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。

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

Facebook page embed iframe doesn't fill container width

html

css

facebook

facebook-like