benedikt.s: CSS Style einer Seite im iFrame dynamisch einbinden

Guten Abend allerseits.

Folgendes Problem:

Ich habe einen iFrame mit einer eingebundenen HTML-Seite... (noch kein Problem ;-)

Ich möchte nun die CSS-Datei, auf die diese HTML-Seite zugreifen kann dynamisch festlegen.
Das ganze soll über DOM-Manipulation per JavaScript geschehen.

Ich kann bereits JavaScript dynamisch in dieser HTML-Seite erstellen.
Ebenfalls über DOM - das sieht dann so aus (und funktioniert auch wunderbar):

----

var myScript  = myIFrameDocument.createElement('script');
myScript.text = '/* Hilfsmethode um Objekte auszulesen */' +
  'function test() {' +           'alert('test');' +
  '}';
myIFrameDocument.body.appendChild(myScript);

----
Die HTML-Seite des iFrame kann dann das JavaScript nutzen.

Dasselbe Spiel wollte ich nun mit einer CSS-Datei betreiben, indem
ich ein neues Link-Element erstelle und wieder per "appendChild()" anhänge.

Sieht so aus (und funktioniert leider nicht..):

/* add css stylesheet */
var cssStyle  = myIFrameDocument.createElement('link');
cssStyle.rel  = "stylesheet";
cssStyle.type = "text/css";
cssStyle.href = "test.css";
myIFrameDocument.body.appendChild(cssStyle);

----

Per DOM-Inspector (FF) sehe ich im DefaulView (der HTML-Seite im iFrame) mein generiertes JavaScript - das StyleSheet finde ich hier leider nicht...

----

Mache ich hier beim Einbinden der CSS-Datei was falsch?
Oder muss der Link-Knoten im "head" der Seite erstellt werden? - Wenn ja, wie komme ich an das Head-Element?

Grüße,
Benedikt

  1. n'abend,

    Oder muss der Link-Knoten im "head" der Seite erstellt werden? - Wenn ja, wie komme ich an das Head-Element?

    Referenzierungen gehören in den Head.
    var meinHead = document.getElementsByTagName('head')[0];

    weiterhin schönen abend...

    --
    Freundlich wie man war, hat man mir Großbuchstaben geschenkt.
    sh:( fo:# ch:# rl:° br:> n4:& ie:{ mo:} va:) de:] zu:} fl:{ ss:? ls:[ js:|
    1. wunderbar, das hat geklappt!

      schönen dank

  2. Hi,

    Mache ich hier beim Einbinden der CSS-Datei was falsch?

    Zusätzlich zu globes Hinweis: Das Einbinden der CSS-Regeln via Textknoten ist OK, weil es Browser gibt, die den offiziellen Weg via styleSheets-Objekt (insertRule()) nicht beherrschen. Allerdings hat der IE Probleme mit diesem "Hack": er möchte das korrekt via styleSheets erledigt wissen (hier heißt die benötigte Methode allerdings addRule()) (s. Coding: CSS-Stylesheets & -Regeln ergänzen)

    Gruß, Cybaer

    --
    Hinweis an Fragesteller: Fremde haben ihre Freizeit geopfert, um Dir zu helfen. Helfe Du auch im Archiv Suchenden: Beende deinen Thread mit einem "Hat geholfen" oder "Hat nicht geholfen"!