Facebook iframe 无法在我的网站上加载。我该如何解决它？

Question

我正在尝试将 iframe 添加到网页的右侧，但由于某种原因，刷新页面时 iframe 不会加载。我尝试在 Google 中查看我的开发人员工具，但我看到的只是我的 iframe 中添加了一个样式属性，上面写着： “显示：无！重要”。我不知道这是否是阻止其加载的原因，但这就是我能想到的。我查看了其他建议，但他们没有解决问题。

如果出现问题，我也不知道如何摆脱显示属性。我没有任何编译问题。我正在使用 React 创建这个网站，并尝试在网页右侧使用 iframe 显示我的 Facebook 帐户。我确实需要一些帮助。这是我的 React 代码：

import React from 'react';
import "./Widgets.css";

function Widgets() {
  return (
    <div className="widgets">
      <iframe 
        title="widgets"
        src="https://www.facebook.com/plugins/page.php?href=https%3A%2F%2Fwww.facebook.com%2Fprofile.php%3Fid%3D100009419984981&tabs=timeline&width=340&height=1500&small_header=false&adapt_container_width=true&hide_cover=false&show_facepile=true&appId" 
        width="340" 
        height="1500" 
        scrolling="no" 
        frameborder="0" 
        allowfullscreen="true" 
        style= {{ border: "none", overflow: "hidden" }}
        allow="encrypted-media">
      </iframe>
    </div>
  )
}

export default Widgets;

影响 iframe 的样式截图：

Answer 1

好吧，我真的无法说出你的问题，因为当我重新创建它时，我得到了不同的结果：

Codepen 链接：https://codepen.io/cypherjac/pen/xxpgGLQ

Iframe Codepen

这很可能是一些外部脚本或样式影响它

---

我已经从您提到的链接中复制粘贴了确切的代码，这就是我得到的..

检查演示的代码笔

---

正如我所说，检查您的样式源并搜索 iframe 一词以查找可能影响它的样式

Answer 2

我也遇到了同样的问题，然后我意识到 Google Chrome 无法加载它，它很重。尝试 Google Incognito，您会看到它完美地工作/加载。

Answer 3

我正在使用 iframe 进行 Facebook 嵌入帖子

• 如果使用普通 Chrome iframe，则不起作用！
• 如果在 Chrome 中使用隐身模式，它可以工作！
• 如果使用 Edge，它可以工作！
• 如果我使用我朋友的 PC chrome，它就可以了！

** 问题是 chrome 缓存问题

解决方案

1. Ctrl + Shift + Del 打开chrome中的“清除浏览数据”
2. 选择“Cookie 和其他网站数据”
3. 选择“缓存图像和文件”
4. 点击“清除数据” 按照设置，然后点击“清除数据”即可。

希望有帮助。

Answer 4

我在 Firefox 上也遇到了同样的问题。 我很早之前就在我的FF上安装了扩展“Facebook容器”。此扩展禁用其他站点与 facebook 的交互（即，它不加载框架）。 我只是为我的网站添加了一个例外（在 Facebook 容器中），它现在可以运行：我可以看到我的 iframe。 这不是技术响应，而只是一些需要检查的事情......