Comment appliquer une CSS à un iframe ?

Si le contenu de l'iframe n'est pas entièrement sous votre contrôle ou si vous voulez accéder au contenu à partir de différentes pages avec des styles différents, vous pouvez essayer de le manipuler en utilisant JavaScript.

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

Notez que, selon le navigateur que vous utilisez, cela peut ne fonctionner que sur les pages servies par le même domaine.

Une iframe est universellement traitée comme une page HTML différente par la plupart des navigateurs. Si vous souhaitez appliquer la même feuille de style au contenu de l'iframe, il suffit de la référencer à partir des pages qui y sont utilisées.

Si vous contrôlez la page dans l'iframe, comme l'a dit hangy, l'approche la plus simple est de créer un fichier CSS partagé avec des styles communs, puis de créer un lien vers ce fichier à partir de vos pages html.

Sinon, il est peu probable que vous puissiez modifier dynamiquement le style d'une page à partir d'une page externe dans votre iframe. En effet, les navigateurs ont renforcé la sécurité du scripting cross frame dom en raison d'une possible utilisation abusive pour l'usurpation d'identité et d'autres piratages.

Ce tutoriel peut vous fournir de plus amples informations sur le scriptage des iframes en général. Le document About cross frame scripting explique les restrictions de sécurité du point de vue d'IE.