在 Facebook 上为 iframe 指定不同的样式表答案

【问题标题】：Specify a different stylesheet for iframe on Facebook在 Facebook 上为 iframe 指定不同的样式表
【发布时间】：2011-03-22 19:07:42
【问题描述】：

当外部页面（我拥有的）显示在 Facebook 的 iframe 中时，我想应用特定样式表。由于 Facebook 的宽度限制，我想只显示页面中的一列，而不更改该页面的 HTML。直接访问时，页面将调用常规 CSS。当通过 iframe 查看时，它会调用特定于 facebook 的 CSS。

换句话说，如何让 Facebook 在通过 iframe 显示内容时使用特定的 CSS 文件？我必须使用 javascript 来获取不同的样式表吗？

【问题讨论】：

标签： css facebook iframe

【解决方案1】：

使用 PHP，您可以检查您的应用程序是否在 Facebook iframe 中运行。您必须检查$_REQUEST 数组并搜索FB 传递给iframe 的参数。它们通常以fb_ 开头，并且可能会因您为应用检查的设置而异。

这样的事情应该可以工作：

<?php
    $fbFrame = false;

    foreach ($_REQUEST as $key => $value)
    {
       if (strpos($key, "fb_") > -1)
       {
          $fbFrame = true;
          break;
       }
    }

    if (array_key_exists('signed_request', $_REQUEST)
        $fbFrame = true; 
?>

然后，在你的 HTML 头中：

<head>
<?php if ($fbFrame): ?>
  <link rel="stylesheet" type="text/css" href="PATH_TO_FB_CSS" />
<?php else: ?>
  <link rel="stylesheet" type="text/css" href="PATH_TO_NORMAL_CSS" />
<?php endif; ?>
</head>

我假设您没有任何自己的参数，以 fb_ 开头或在您的 $_GET 或 $_POST 中调用 signed_request，当然。

【讨论】：

【解决方案2】：

无论是否在 iframe 中运行，这就像打印出不同的样式一样简单。诚然，如果您在其他站点的 iframe 中运行此站点，这也会生效。但实际上，facebook 是最重要的，只要它还在运行，你真的在乎吗？

这对我有用。希望它也适用于您。

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=9" />
    <title>My Coolest Site</title>
    <link type="text/css" href="/css/my-common-1.css" rel="stylesheet">
    <link type="text/css" href="/css/my-common-2.css" rel="stylesheet">
    <script type="text/javascript">
    if (top === self) {
          document.write('<link type="text/css" href="/css/my-specific-1.css" rel="stylesheet">');
          document.write('<link type="text/css" href="/css/my-specific-2.css" rel="stylesheet">');

    } else { 
          document.write('<link type="text/css" href="/css/my-fb-1.css" rel="stylesheet">');
          document.write('<link type="text/css" href="/css/my-fb-2.css" rel="stylesheet">');
    }
    </script>

【讨论】：

【解决方案3】：

因为它在 iframe 中，所以适用同源政策。您无法访问来自不同域的内容。

【讨论】：