Flash Reload Problem jQuery IE Internet Explorer

Donnerstag, 08. September 2011

Eine Stunde Kopfschmerzen: Ich lade per jQuery-Ajax den Inhalt einer neue Seite und füge ihn nach dem Laden über diese Zeile ins DOM ein. Das Problem: Alles JavaScripte des neuen, geladenen Dokumentes werden im IE8 automatisch ausgeführt, sobald er den Befehl $(‘.content’, data) ausführt.
Bei unserem Projekt führte das zu Problemen, da über swfobject ein Flash-Film im DOM eingefügt wurde und so bei jedem Nachladen eines Inhaltes über AJAX auch der Flash-Film neu eingebettet wurde und von vorne startete:

// Laden des Inhalts per jQuery AJAX
$.ajax({  url: 'http://www.meineurl.de', success: function (data) {
      $('.content').html( $('.content', data).html() );
}});

Damit es keinen Reload des Flash-Films gibt, bestand die Lösung darin, über eine RegEx alle Script-Tags aus der Ajax-Rückgabe zu entfernen und dann erst zu parsen bzw. ins DOM einzufügen:

// Laden des Inhalts per jQuery AJAX
$.ajax({  url: 'http://www.meineurl.de', success: function (data) {
      data = data.replace(/<script[^>]*?>[\s\S]*?<\/script>/gi, '');
      $('.content').html( $('.content', data).html() );
}});

Zweites Phänomen: Der Flash-Film war in ein DIV eingebettet und das DIV wurde über jQuery dynamisch skaliert. Die Skalierung des DIVs führte in bestimmten Browsern ebenfalls zu einem Reload / Refresh des Flash-Films. Dieses Problem ließ sich relativ leicht über eine Anpassung im CSS des DIVs lösen:

.container_um_das_swf {
     height: 200px;
     overflow: hidden !important;
}