facebook嵌入代码上奇怪的iframe宽度错误答案

【问题标题】：Weird iframe width bug on facebook embed codefacebook嵌入代码上奇怪的iframe宽度错误
【发布时间】：2019-10-28 22:17:30
【问题描述】：

我正在尝试在我的网站上嵌入 Facebook 评论，但盒子的宽度看起来不正确。宽度：286px，加载默认350px；

有趣的是，当我打开开发者控制台并重新加载页面时，iframe 以应有的大小完美加载。

我还尝试编写在页面呈现后重新加载 iframe 但没有成功的 jquery 脚本。

有谁知道为什么会发生这种情况以及我该如何解决？谢谢

                            <div class="container">
                              <div class="row">
                                <div class="col-sm">
                                    <div class="card" style="width: 286px; height:215px;">
                                          <iframe onload="reloadOnce(this)" width="286px" height="215px" src="https://www.facebook.com/plugins/post.php?href=https%3A%2F%2Fwww.facebook.com%2Fkirsty.armstrong.904%2Fposts%2F2292031390876127&width=286" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowTransparency="true" allow="encrypted-media"></iframe>
                                    </div>
                                </div>
                                <div class="col-sm">
                                    <div class="card" style="width: 286px; height:215px;">
                                          <iframe onload="reloadOnce(this)" src="https://www.facebook.com/plugins/post.php?href=https%3A%2F%2Fwww.facebook.com%2Faneesa.aidroos.3%2Fposts%2F386560588794579&width=286" width="286px" height="215px" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowTransparency="true" allow="encrypted-media"></iframe>
                                    </div>
                                </div>
                                <div class="col-sm">
                                    <div class="card" style="width: 286px; height:215px;">
                                          <iframe onload="reloadOnce(this)" src="https://www.facebook.com/plugins/post.php?href=https%3A%2F%2Fwww.facebook.com%2Falinbush%2Fposts%2F2343483609028644&width=286" width="286px" height="215px" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowTransparency="true" allow="encrypted-media"></iframe>
                                    </div>

                                </div>
                              </div>
                            </div>

【问题讨论】：

Facebook 提供了在其数据变量中使用small、large 等选项来管理此宽度。您可以在他们的官方开发者网站上找到可能的值。

标签： jquery html css iframe facebook-iframe

【解决方案1】：

Facebook 要求宽度至少为 350 像素。

【讨论】：