Le code ci-dessous marche dans IE (applique le style dans iframe comme dans la page principale), par contre sous Firefox, ajouter un stylesheet à un iframe n'a aucun effet (l'arrière plan ne change pas de couleur, la police de caractères reste Times New Roman...)
PS. A remarquer toutefois : Firebug affiche bien qu'un <link ... /> approprié est ajouté à iframe.
main.html
Code : Tout sélectionner
<html>
<head>
<script>
function AddCSS(fwin)
{
// Adding style sheet
var styles = "main.css";
var newSS=fwin.document.createElement('link');
newSS.rel='stylesheet';
newSS.type='text/css';
newSS.href=escape(styles);
fwin.document.getElementsByTagName("head")[0].appendChild(newSS);
// Adding some text
var sometext = fwin.document.createElement('div');
sometext.className = 'redtext';
sometext.innerHTML = 'Hello <u>World</u>!';
fwin.document.getElementsByTagName("body")[0].appendChild(sometext);
// Adding some embedded style
var embedstyle = fwin.document.createElement('style');
embedstyle.type='text/css';
embedstyle.innerHTML = 'body { color:green; }';
fwin.document.getElementsByTagName("body")[0].appendChild(embedstyle);
}
</script>
</head>
<body>
<iframe id="iView" style="width:500px; height:200px"></iframe>
<div onclick="AddCSS(document.getElementById('iView').contentWindow);">Add style to iframe</div>
<div onclick="AddCSS(window);">Add style to this window</div>
<hr />
Explication of the problem: when we add a text ("Hello <u>World</u>!") or an inner style element (green text), it works for both the window and the iframe object. But adding a stylesheet works only for the window, and fails for iframe. Note that in DOM, <link ...> element specifying the stylesheet appears in both the window and the iframe.
</body>
</html>Code : Tout sélectionner
body {
padding:20px;
font-family:'Trebuchet MS', sans-serif;
background-color:orange;
}