postMessage im IE8 – So funktioniert es!

26. Februar 2014 · Kategorien: JavaScript, Webentwicklung

postMessage im IE8

Bei der Verwendung von postMessage im IE8 gibt es einige Dinge zu beachten. Vor allem in Verbindung mit JSON. Welche das sind, werde ich in diesem Artikel erläutern.

Doctype korrekt setzen

Der Doctype sollte korrekt gesetzt sein. Mit dem HTML5-Doctype

<DOCTYPE !html>

wird postMessage im IE8 funktionieren.
Generell sollte man darauf achten, validen HTML-Code zu schreiben.

Event Listener richtig konfigurieren

Fast alle Browser verwenden zum Registrieren von Event Listenern

window.addEventListener("message", receiveMessage);

Der Internet Explorer 8 macht da leider eine Ausnahme:

window.attachEvent("onmessage", receiveMessage);

Man beachte, dass die Funktion attachEvent heißt und dem Namen des Events ein on vorangestellt ist.

JSON serialisieren

Leider gelang es mir nicht, JSON direkt über postMessage im IE8 zu übergeben.
Zum Glück gibt es in JavaScript die beiden Funktionen

JSON.stringify

sowie

JSON.parse

.

Beide Funktionen können dazu verwendet werden, um JSON in einen String zu verwandeln und – umgedreht – den String wieder in ein JSON Objekt zu parsen.

Funktionierendes JSON postMessage im IE8

Auf folgende Weise sollte postMessage im IE8 funktionieren. Der folgende Code sendet nach 1 Sekunde eine postMessage mit JSON vom Iframe an den Parent.

iframe.html

<!DOCTYPE html>
<head>
	<title>Iframe</title>
	<script type="text/javascript">
		window.setTimeout(function() {
			var json = {
				'hallo': 'welt'
			};
			
			parent.postMessage(
				JSON.stringify(json),
				'http://localhost'
			);
		}, 1000);
	</script>
</head>
<body>
	Hallo, Iframe!
</body>

parent.html

<!DOCTYPE html>
<head>
	<title>Test</title>
	<script type="text/javascript">
		function receiveMessage(event)
		{
			var json = JSON.parse(event.data);
			alert(json.hallo);
		}

		if(window.attachEvent) {
			window.attachEvent("onmessage", receiveMessage);
		}

		if(window.addEventListener) {
			window.addEventListener("message", receiveMessage);
		}

	</script>
</head>
<body>
	<iframe src="iframe.html" style="width: 500px; height: 500px;"></iframe>
</body>

Autor: | Kategorien: JavaScript, Webentwicklung

Keine Kommentare zu postMessage im IE8 – So funktioniert es!

Hinterlasse eine Antwort

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert *