Показать страницу по-другому (css), если внутри iframe

Ответ 1

Вы можете inject другую таблицу стилей, если окно не является верхним окном.

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

Ответ 2

Вместо того, чтобы вводить новую таблицу стилей, я бы предложил добавить класс CSS к body.

Пример jQuery:

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

Теперь вы можете стилизовать вещи по-другому, например

.in-iframe p {
  background: purple;
}

Ответ 3

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;
}

Если страница является единственной отображаемой страницей, верхняя, родительская, я и окно будут равны. Если страница хранится в наборе фреймов, то self и top не будут равны. Если страница - это страница, содержащая набор фреймов, и сама она не удерживается в наборе фреймов, то сами и верх будут равны.

Ответ 4

Вот быстрый и удобный для дизайнера подход с использованием 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, чтобы ваша тяжелая работа не была захвачена.