Welche Events feuern bei dynamisch nachgeladenen Dateien?

[molily]

ich möchte den Inhalt einer CSS-Datei mittels JavaScript auslesen. Bisher missbrauche ich dazu einen XHR, möchte das aber nach Möglichkeit anders tun.

Wieso ist das ein Missbrauch? Es dürfte die zuverlässigste Möglichkeit sein.

Meine Recherchen ergaben nur dürftige Hintergründe. MooTools kann das anscheinend, aber dieses Framework nutze ich nicht, hilft mir also nix.

Die Lösung dort ist doch ziemlich simpel und hat mit Mootools nichts zu tun:

var element = new Element('link', {  
	'type': 'text/css',  
	'href': style,  
	'media': 'all',  
	'rel': 'stylesheet'  
}).inject(head);  
	  
//MSIE onload eventing.  
if (Browser.Engine.trident) {  
	element.onreadystatechange = function ()	{  
		if (/loaded|complete/.test(element.readyState)) {  
			progress();  
		}  
	}  
}  
//Opera onload eventing.  
else if (Browser.Engine.presto) {  
	element.onload = progress;				  
}  
//Everyone else's onload eventing.  
else {  
	(function(){  
		try {  
			element.sheet.cssRule;  
		} catch(e){  
			setTimeout(arguments.callee, 20);  
			return;  
		};  
		progress();  
	})();  
}

Das ist vom Ansatz brauchbar, nur das Browser-Sniffing ist unschön. Dummerweise kann man hier auch kein Feature-Testing machen. Die übliche Methode zur Event-Unterstützung liefert falsche Werte. Daher würde ich einfach sämtliche Methoden verwenden (load, readystatechange, Polling). Eines davon wird eintreffen, das reicht ja.

(function () {  
	function loadStylesheet(url, callback) {  
		var loaded = false;  
		function success (e) {  
			if (loaded) return;  
			loaded = true;  
			callback.call(link);  
			link.onload = link.onreadystatechange = null;  
		}  
		var link = document.createElement('link');  
		link.rel = 'stylesheet';  
		link.type = 'text/css';  
		link.href = url;  
		link.onload = success;  
		link.onreadystatechange = function () {  
			var state = link.readyState;  
			if (state == 'loaded' || state == 'complete') {  
				success();  
			}  
		};  
		(function poll () {  
			if (link.sheet) {  
				success();  
			} else {  
				setTimeout(poll, 50);  
			}  
		})();  
		var head = document.getElementsByTagName('head')[0];  
		head.appendChild(link);  
	}  
	loadStylesheet('test.css', function () {  
		alert('loaded ' + this.sheet);  
	});  
})();

Auch Molilys onload-Techniken helfen mir nicht weiter, da anscheinend das Nachladen der CSS-Datei kein onload-Ereignis auslöst

Doch, im Prinzip gemäß HTML5 schon. Allerdings implementieren das nur IE 9 und Opera bisher.

Vielleicht ist es ja nicht dasselbe, ob ich nun einfach linkElement.onerror=function(){} notiere, oder ob ich wie in Molilys Doku angeraten den Weg mit addEventListener gehe

Doch, das dürfte i.d.R. dasselbe Resultat haben, wenn man nur einen Handler hat.

Mathias