Seite anders anzeigen (css) wenn innerhalb iframe

Question

Gibt es eine Möglichkeit, wie der Titel sagt "Seite anders (css) wenn iframe" anzeigen. Ich suche nach einer jQuery/JavaScript-Methode, um möglicherweise ein anderes CSS-Stylesheet zu verwenden, wenn sich die Site innerhalb eines IFrames befindet. Irgendwelche Ideen?

Answer 1

Sie können inject ein anderes Stylesheet, wenn das Fenster nicht die top window ist.

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

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

Wenn die Seite ist die einzige Seite angezeigt wird, oben, Eltern, sich selbst und Fenster gleich sein. Wenn die Seite innerhalb eines Framesets gehalten wird, sind self und top nicht gleich. Wenn die Seite die Seite ist, die das Frameset enthält, und sie selbst nicht innerhalb eines Framesets gehalten wird, sind self und top gleich.

Answer 3

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

jQuery Beispiel:

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

Jetzt können Sie die Dinge anders wie

.in-iframe p { 
    background: purple; 
} 

Answer 4

Hier Stil ist ein schneller und Designer freundlicher Ansatz Vanille JS verwenden. Nur eine Zeile von JS und das Aussehen und Gefühl kann von CSS/SASS/LESS gesteuert werden.

Dieses im head Element vor jedem 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 in Ihrem CSS/SASS/LESS können Sie verbergen, anzeigen, und zwicken, auf deren Basis Klasse angewendet wurde.

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

PSA: Betrachten Sie die Vorteile der X-Frame-Options Einnahme von Ihrer harten Arbeit zu halten entführt.