Seite anders anzeigen (css), wenn innerhalb eines iframe

Question

Gibt es eine Möglichkeit, wie der Titel sagt "Show Seite anders (css) wenn innerhalb iframe". Ich bin auf der Suche nach einem jQuery / JavaScript-Methode, um möglicherweise eine andere CSS-Stylesheet verwenden, wenn die Website innerhalb eines Iframe ist. Irgendwelche Ideen?

Answer 1

Sie können einspeisen. ein anderes Stylesheet, wenn das Fenster nicht das oberes Fenster .

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

Answer 2

Anstatt ein neues Stylesheet einzufügen, würde ich vorschlagen, eine CSS-Klasse zu body .

jQuery-Beispiel:

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

Jetzt können Sie Dinge anders gestalten wie

.in-iframe p {
  background: purple;
}

Answer 3

Hier ist ein schneller und designerfreundlicher Ansatz mit Vanilla JS. Nur eine Zeile JS und das Erscheinungsbild kann über CSS/SASS/LESS gesteuert werden.

Platzieren Sie dies innerhalb der head Element, bevor ein CSS oder JS geladen wird:

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

Dann können Sie in Ihrem CSS/SASS/LESS je nachdem, welche Klasse angewendet wurde, den Text ausblenden, anzeigen und optimieren.

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

PSA: Nutzen Sie die Vorteile des X-Frame-Options um zu verhindern, dass Ihre harte Arbeit missbraucht wird.

Answer 4

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

Wenn die Seite die einzige Seite ist, die angezeigt wird, sind top, parent, self und window gleich. Wenn die Seite in einem Frameset gehalten wird, sind self und top nicht gleich. Wenn die Seite die Seite ist, die das Frameset enthält, und sie selbst nicht in einem Frameset enthalten ist, sind self und top gleich.