Manuel-Bieh.de – Web-Development & Consulting

Gestern habe ich mir beim Entwickeln einer WebApp für das iPad die Zähne ausgebissen an einem Problem das so simpel schien, ich aber trotzdem lange gebraucht habe um des Rätsels Lösung zu finden. Ich wollte dynamisch per XMLHttpRequest() einen <style>-Knoten nachladen und in mein aktuelles Dokument einfügen. Dazu nutzte ich den folgenden Code:

(function() {
	var style = document.createElement('style');
	style.innerHTML = 'body {background: #ACC;}';
	document.getElementsByTagName('head')[0].appendChild(style);
})();

Einfach, logisch, funktioniert. Sollte man denken. Funktioniert am Desktop und am iPhone auch fantastisch, das iPad schmeißt mir hingegen den Fehler NO_MODIFICATION_ALLOWED_ERR DOM Exception 7 und fügt keinen neuen style-Knoten in mein Dokument ein. Des Rätsels Lösung ist hier einfach und liegt am innerHTML. Diese Anweisung scheint das iPad bei Styles nicht zu interpretieren. Nutzen sollte man hier stattdessen:

(function() {
	var style = document.createElement('style');
	var text = document.createTextNode('body {background: #ACC;}');
	style.appendChild(text);
	document.getElementsByTagName('head')[0].appendChild(style);
})();

Dann fügt auch das iPad ohne zu murren den Style ins Dokument.