Für alle, die sich eimal gefragt haben, ob das Eltern-Dokument CSS in eins seiner iFrames injizieren kann und für die, die gerne wissen würden wie das geht und natürlich für alle Anderen auch: Gibts heute einen tollen Post, in dem ich kurz und knackig erkläre, wie das funktioniert.

Ich habe mal ein kleines JavaScript geschrieben, welches einzelne CSS-Selektoren mit ihren Definitionen in einen iFrame mit beliebiger ID schreibt.

 

Die folgende Funktion nimmt als Parameter die ID des iFrames entgegen und die entsprechenden CSS-Definitionen. Im ersten Schritt wird ein Style-Tag mit einer ID erstellt oder ein bereits vorhanderer Style-Tag mit genau dieser ID (“_injectCSSTag”) verwendet um CSS-Definitionen anzuhängen. Im nächsten Schritt werden die übergebenen CSS-Selektoren inkl. ihrer Definitionen dann in das Style-Tag geschreiben. Fertig. Beispiel-Aufruf gibts weiter unten.

function injectCSS(iFrameID, cssText) {
	var iframe = document.getElementById(iFrameID);
	iframe = (iframe.contentDocument ? iframe.contentDocument : iframe.contentWindow.document);

	var styleTag = false;

	if (iframe.getElementById('_injectCSSTag')) {
		styleTag = iframe.getElementById('_injectCSSTag');
	} else {
		styleTag = iframe.createElement('style');
		styleTag.setAttribute('type', 'text/css');
		styleTag.setAttribute('id', '_injectCSSTag');
	}

	cssText = cssText + '\n';

	if (styleTag.styleSheet) {
		styleTag.styleSheet.cssText += cssText;
	} else {
		var cssTextNode = iframe.createTextNode(cssText);
		styleTag.appendChild(cssTextNode);
	}

	iframe.body.appendChild(styleTag);
}

 

So und hier noch der versprochene Beispiel-Aufruf:

 

injectCSS('testFrame', 'body { background-color: blue; }');
injectCSS('testFrame', 'body { color: green; }');
injectCSS('testFrame', 'div { background-color: black; }');

 

Somit  hat man nun die Möglichkeit schnell und einfach das Layout eined Dokuments zu manipulieren, welches man per iFrame einbindet. Viel Spaß damit

Ähnliche Artikel

• Keine ähnliches Posts