未加载内容时填充 iframe 内容 Facebook 特定答案

【问题标题】：iframe content fill when content not loaded Facebook specific未加载内容时填充 iframe 内容 Facebook 特定
【发布时间】：2014-02-07 13:19:20
【问题描述】：

我正在以 iframe 形式安装一个类似 Facebook 的框。当您未登录 Facebook 时，它会留下一个空白点，该空白点设置为原始 iframe 指定的参数。当有人未登录 Facebook 时，我想用图像填充该 iframe 以链接到 Facebook 页面。

未登录： http://ripvision.tv/images/fb-not-logged-in.PNG

您可以在“登录”中看到我试图设置一个带有背景图像的类，以便在内容未显示时显示，但在内容加载和不加载时显示。如果 Facebook 内容未加载，我只想加载图像链接。我已经尝试了我能想到的一切。

我认为在 iframe 的样式中添加背景颜色会起作用，但它没有。这是来自 Facebook 的 iframe 代码。

   <iframe class="fb_background" src="//www.facebook.com/plugins/likebox.php?href=http  %3A%2F%2Fwww.facebook.com%2Fteamripoutdoors&amp;width=236&amp;height=258&amp;colorscheme=light&amp;show_faces=true&amp;header=false&amp;stream=false&amp;show_border=false" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:100%; height:258px; background-color: #000;"  allowTransparency="true"></iframe>

我已经为此困惑了好几个小时。如果有人可以提供帮助，我将不胜感激。

【问题讨论】：

标签： html facebook iframe

【解决方案1】：

我会用FB.getLoginStatus这个

FB.getLoginStatus 允许您确定用户是否登录到 Facebook 并已对您的应用进行了身份验证。有三种可能用户状态：

用户已登录 Facebook 并验证了您的应用程序（已连接）

用户已登录 Facebook，但尚未验证您的应用程序（未授权）

此时用户未登录 Facebook，因此我们不知道他们是否已验证您的应用程序（未知）

在这种情况下，我们将使用 not_authorized 表示用户已登录他们的 Facebook 帐户并会显示赞框

unknown 表示用户未登录其 Facebook 帐户并显示备用图片

FB.getLoginStatus(function(response) {

  if (response.status === 'not_authorized') {
    // the user is logged in to Facebook, 
    // but has not authenticated your app
    $('#likeBoxDiv').fadeIn();
  } else {
    // the user isn't logged in to Facebook.
    $('#likeBoxDiv').html('{YOUR_FALLBACK_DIV');
  }

});

这是一个简单的Fiddle

记住：为此创建一个应用程序并且不要使用此应用程序验证任何用户否则你也必须添加connected声明

【讨论】：