Afficher la page différemment (css) si iframe

Question

Y at-il un moyen de, comme le titre dit "Afficher la page différemment (css) si dans iframe". Je suis à la recherche d'une méthode jQuery/JavaScript pour potentiellement utiliser une feuille de style css différente si le site est dans un iframe. Des idées?

Answer 1

Vous pouvez inject une feuille de style différente si la fenêtre n'est pas top window.

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

Si la page est la seule page affichée, haut, parent, l'auto et la fenêtre seront égaux. Si la page est maintenue dans un cadre, self et top ne seront pas égaux. Si la page est la page contenant le jeu de cadres et qu'elle n'est pas contenue dans un jeu de cadres, self et top seront égaux.

Answer 3

Plutôt que d'injecter une nouvelle feuille de style, je suggère d'ajouter une classe CSS à body.

exemple jQuery:

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

Maintenant, vous pouvez définir le style des choses différemment comme

.in-iframe p { 
    background: purple; 
} 

Answer 4

Voici une approche rapide et conviviale design en utilisant JS vanille. Juste une ligne de JS et l'apparence peut être contrôlée à partir de CSS/SASS/LESS.

Placez ce dans l'élément head avant que CSS ou JS est chargé:

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

Ensuite, dans votre CSS/SASS/MOINS vous pouvez masquer, afficher et modifier la base de laquelle la classe a été appliquée.

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

PSA: envisager de tirer parti de la X-Frame-Options pour garder votre travail d'être pris en otage.