Показать страницу по-другому (CSS), если внутри iframe - PullRequest
18 голосов
/ 04 декабря 2010

Есть ли способ, как говорится в заголовке "Показать страницу по-другому (css), если внутри iframe".Я ищу метод jQuery / JavaScript, чтобы потенциально использовать другую таблицу стилей CSS, если сайт находится в пределах iframe.Есть идеи?

Ответы [ 4 ]

35 голосов
/ 04 декабря 2010

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

if (window.top!=window.self)
{
  // In a Frame or IFrame
}
else
{
  // Not in a frame
} 
15 голосов
/ 29 августа 2014

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

Пример jQuery:

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

Теперь вы можете оформлять вещи по-другому, как

.in-iframe p {
  background: purple;
}
5 голосов
/ 28 мая 2015

Вот быстрый и удобный подход с использованием Vanilla JS. С помощью CSS / SASS / LESS можно управлять только одной линией JS, а внешний вид и стиль.

Поместите это в элемент 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 , чтобы избежать кражи вашей тяжелой работы.

4 голосов
/ 04 декабря 2010
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 будут равны.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...