Comment appliquer les CSS d'une page web au contenu d'une iframe ?

Si l'iFrame est situé sur le même domaine que celui de votre page, vous pouvez modifier le code de la page chargée dans l'iFrame pour y inclure votre feuille de style.

Les iFrames sont des blocs permettant au développeur d'appeler le contenu d'une autre page internet et de l'afficher au sein de la sienne. Il est possible qu'il y ait en conséquence un décalage de style entre la page principale et la ou les page(s) appelée(s) par le biais des iFrames (lire aussi notre article Comment intercepter l'évènement .ready d'une iFrame avec jQuery ?) .

Si l'iFrame est situé dans le même domaine que celui de votre page internet, vous pouvez, en utilisant le langage JavaScript, modifier le code HTML de la page chargée dans l'iFrame pour y inclure votre feuille de style. Pour cela, il faut se servir de la propriété document de l'élément frame, qui contient le code HTML de la page chargée. L'attribut head permet de récupérer l'élément <head> du document. C'est dans cette balise que doivent se trouver les liens vers les feuilles de style. Pour créer le lien, le langage JavaScript fournit différentes méthodes liées au DOM.

La méthode createElement() crée l'élément et la méthode setAttribute() qui permettent de créer les différents attributs du lien vers la feuille de style :

var page = frames['frame'].document;
var lienFeuilleStyle = frm.createElement(link);
lienFeuilleStyle.setAttribute(rel, stylesheet);
lienFeuilleStyle.setAttribute(type, text/css);
lienFeuilleStyle.setAttribute(href, style.css);
page.head.appendChild(lienFeuilleStyle);

Il est important de savoir que cette méthode ne fonctionne que pour les pages ayant le même nom de domaine que la page comportant l'iFrame. Appliquer ce code sur une page comportant un autre nom de domaine est une intrusion et provoque une erreur.

HTML/CSS