Facebook嵌入帖子在Safari移动端无法渲染的问题求助

以下是针对iPhone 11 Safari移动端无法显示Facebook嵌入帖子的几种可行方案：

方案一：使用Facebook官方JavaScript SDK加载（推荐） #

直接用iframe易出现浏览器兼容性问题，官方SDK会自动适配不同环境：

1. 在页面<head>中添加SDK初始化代码：

<div id="fb-root"></div>
<script async defer crossorigin="anonymous" src="https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v18.0"></script>

2. 替换原有的iframe标签为FB的XFBML标签：

<div class="fb-post" data-href="https://www.facebook.com/vitrina.bg/posts/pfbid02EWp2MPqbUQ2DrYVkRinegLm2ae1yE6MUbnrypM6D5cV64zt2wG5zej5ExryG6VSil" data-width="500" data-show-text="true"></div>

方案二：调整现有iframe的属性和样式 #

如果不想改用SDK，可以修改iframe参数适配Safari：

• 移除固定高度height="500"，改为height="auto"，同时添加最小高度样式避免内容塌陷；
• 调整滚动属性，避免Safari隐藏溢出内容；
  修改后的代码：

<iframe src="https://www.facebook.com/plugins/post.php?href=https%3A%2F%2Fwww.facebook.com%2Fvitrina.bg%2Fposts%2Fpfbid02EWp2MPqbUQ2DrYVkRinegLm2ae1yE6MUbnrypM6D5cV64zt2wG5zej5ExryG6VSil&show_text=true&width=500" width="100%" height="auto" style="border:none;overflow:hidden;min-height:500px" scrolling="yes" frameborder="0" allowfullscreen="true" allow="autoplay; clipboard-write; encrypted-media; picture-in-picture; web-share"></iframe>

方案三：检查网站内容安全策略（CSP） #

如果网站配置了CSP，需确保允许加载Facebook相关资源，在CSP规则中添加：

script-src https://connect.facebook.net;
frame-src https://www.facebook.com;
style-src https://www.facebook.com;

否则Safari会因安全限制阻止嵌入内容加载。

内容的提问来源于stack exchange，提问作者ThunderHorn