如果在iframe中,则以不同方式显示页面(css)

Question

有没有办法,正如标题所说"在iframe中以不同方式显示页面(css)".我正在寻找一个jQuery/JavaScript方法,如果该网站在iframe中,可能会使用不同的css样式表.有任何想法吗？

Answer 1

如果窗口不是顶部窗口,则可以注入不同的样式表.

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

Answer 2

我会建议添加一个CSS类,而不是注入一个新的样式表body.

jQuery示例:

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

现在你可以用不同的方式设计样式

.in-iframe p {
  background: purple;
}

Answer 3

这是一种使用vanilla JS的快速且设计友好的方法.只需一行JS,外观可以通过CSS/SASS/LESS进行控制.

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

// 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来保持你的辛勤工作不被劫持.