如果在 iframe 中以不同方式显示页面（css）答案

【问题标题】：Show page differently (css) if within iframe如果在 iframe 中以不同方式显示页面（css）
【发布时间】：2011-05-20 05:31:06
【问题描述】：

有什么办法，正如标题所说的“如果在 iframe 内以不同方式显示页面（css）”。如果站点在 iframe 中，我正在寻找一种 jQuery / JavaScript 方法来可能使用不同的 css 样式表。有什么想法吗？

【问题讨论】：

标签： javascript jquery html css iframe

【解决方案1】：

如果窗口不是top window，您可以inject 使用不同的样式表。

if (window.top!=window.self)
{
  // In a Frame or IFrame
}
else
{
  // Not in a frame
}

【讨论】：

是否有纯 CSS 方法来完成此操作，或者是否需要通过 JavaScript 检查window.top？
@iX3 - 没有 . CSS 不知道框架。

【解决方案2】：

if( self != top ) {
   headTag = document.getElementsByTagName("head")[0].innerHTML;
   var frameCSS = headTag + '<style type="text/css">**insert CSS here**</style>';
   document.getElementsByTagName('head')[0].innerHTML = frameCSS;
}

如果页面是唯一显示的页面，top、parent、self 和 window 将相等。如果页面被保存在框架集中，self 和 top 将不相等。如果页面是包含框架集的页面，并且它本身没有被保存在框架集中，则 self 和 top 将相等。

【讨论】：

【解决方案3】：

与其注入新样式表，我建议将 CSS 类添加到 body。

jQuery 示例：

$(function() {
  if (window.self != window.top) {
    $(document.body).addClass("in-iframe");
  }
});

现在你可以设置不同的样式

.in-iframe p {
  background: purple;
}

【讨论】：

^这个。对于大多数实际用途来说，使用一个全新的 css 文件可能是多余的。

【解决方案4】：

这是一种使用 vanilla JS 的快速且对设计人员友好的方法。只需一行 JS 即可从 CSS/SASS/LESS 控制外观。

在加载任何 CSS 或 JS 之前将其放置在 head 元素中：

// Sets the class of the HTML element using vanilla JavaScript
document.documentElement.className += (window.self == window.top ? " top" : " framed");

然后在您的 CSS/SASS/LESS 中，您可以根据应用的类隐藏、显示和调整。

/* Hide site navigation when in an iframe */
html.framed .site-nav,
html.framed .site-footer {
    display: none;
}

PSA：考虑利用X-Frame-Options 来防止您的辛勤工作被劫持。

【讨论】：

这只是整洁、干净且不言自明，我喜欢它！
这就是我最终这样做的方式。非常聪明的杰里米。简短而简单。