如何使 facebook 帖子嵌入（iframe 版本）响应？答案

【问题标题】：how to make the facebook post embed (iframe version) responsive?如何使 facebook 帖子嵌入（iframe 版本）响应？
【发布时间】：2017-02-02 03:13:40
【问题描述】：

只要您嵌入 facebook 照片（我在这里只讨论 iframe 版本）Embedding facebook post on responsive website 中描述的解决方案就可以了。

但问题是：如何让真正的 Facebook 帖子嵌入响应式？示例 iframe：

<iframe src="https://www.facebook.com/plugins/post.php?href=https%3A%2F%2Fwww.facebook.com%2Fmashable.tech%2Fposts%2F10153931394037919&width=500" width="500" height="482" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowTransparency="true"></iframe>

请注意：我无法使用 JavaScript-SDK 版本，必须使用 iframe。

【问题讨论】：

也有同样的问题。这是嵌入 Facebook 帖子而不是视频帖子嵌入。
您将找不到此问题的解决方案。您必须使用 FB Javascript SDK
@michbeck 你能详细一点吗？在过去的 2 个小时里，我也在努力解决同样的问题（嵌入 Facebook 帖子）。 :D
@NadaLeCoupanec 据我所知，FB javascript sdk 仍然是您可以使用的唯一选项
谢谢！我最终使所有内容都可以滚动：stackoverflow.com/a/19650278/10619827

标签： facebook css responsive-design responsive facebook-iframe

【解决方案1】：

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。

【讨论】：