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

Posted 2023-03-06

【中文标题】如果在 iframe 中以不同方式显示页面（css）

【英文标题】：Show page differently (css) if within iframe

【发布时间】：2011-05-20 05:31:06

【问题描述】：

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

【参考方案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 来防止您的辛勤工作被劫持。

【讨论】：

这只是整洁、干净且不言自明，我喜欢它！

这就是我最终这样做的方式。非常聪明的杰里米。简短而简单。