Gunnar: FLASH DOM IE6.0 appendChild

Hallo,

ich habe gerade angefangen mit JavaScript-Programmierung und habe leider ein hartnaeckiges Problem:

Ich moechte kleine Flash-Videos dynamisch auf meiner Webseite einbinden und dazu (W3C-konform) NICHT den Befehl innerHTML verwenden. Der Code, den ich dazu benutzen moechte ist auf das Wesentliche reduziert unten aufgelistet.

Mein Problem ist nun: Mit Firefox funktionieren beide Methoden (innerHTML und DOM) gleich gut, mit IE 6.0 bekomme ich mit der DOM-Methode keine Anzeige. Ich habe bereits ueber die Probleme von IE mit dem setAttribute-Befehl gelesen und diesen Befehl komplett entfernt; auch zeigen die (momentan wegkommentierten) Alert-Ausgaben, dass alle Attribute korrekt gesetzt sind.

  • Der Code : -------------------------------

<html>
<head><title>Test</title>
<script type="text/javascript">

function addFlashWithInnerHTML()
  {
    var tagObj = document.getElementById( "id01" );

tagObj.innerHTML = '<object type="application/x-shockwave-flash"' +
                       ' data="flashMovie.swf" style="width: 50px; height: 50px">' +
                       '    <param name="movie" value="flashMovie.swf"/>' +
                       '</object>';
  }

function addFlashWithDOM()
  {
    var tagObj = document.getElementById( "id01" );

var flashObj = document.createElement( "object" );
    flashObj.type = "application/x-shockwave-flash";
    flashObj.data = "flashMovie.swf";
    flashObj.style.width = "50px";
    flashObj.style.height = "50px";

var paramObj = document.createElement( "param" );
    paramObj.name = "movie";
    paramObj.value = "flashMovie.swf";

//Confirmation inserted values;
    /*
    alert( flashObj.getAttribute( "type" ) );
    alert( flashObj.getAttribute( "data" ) );
    alert( flashObj.style.getAttribute( "width" ) );
    alert( flashObj.style.getAttribute( "height" ) );
    alert( paramObj.getAttribute( "name" ) );
    alert( paramObj.getAttribute( "value" ) );
    */

var childB = tagObj.appendChild( flashObj );
    var childA = flashObj.appendChild( paramObj );

//Confirmation appended children values;
    /*
    alert( childA.getAttribute( "tagName" ) );
    alert( childA.getAttribute( "name" ) );
    alert( childA.getAttribute( "value" ) );
    alert( childB.getAttribute( "tagName" ) );
    alert( childB.getAttribute( "type" ) );
    alert( childB.getAttribute( "data" ) );
    alert( childB.style.getAttribute( "width" ) );
    alert( childB.style.getAttribute( "height" ) );
    */
  }

</script>

</head>
<body>

Click <em><a onclick="addFlashWithInnerHTML();"> here </a></em> for flash inclusion via innerHTML <br/><br/>
  Click <em><a onclick="addFlashWithDOM();"> here </a></em> for flash inclusion via DOM <br/><br/>
  Play flash object here:
  <span id="id01"></span>

</body>
</html>

--------------------------------------------

Auch auf die Gefahr hin, das diese Frage schon haeufig gestellt wurde (obwohl ich bislang durch googeln keine Antwort gefunden habe): Wie schaffe ich es, diesen Code standardkonform bleibt und TROTZDEM funktioniert?

Vielen Dank an jeden der mir weiterhelfen kann,

Gunnar

  1. Hi,

    Ich moechte kleine Flash-Videos dynamisch auf meiner Webseite einbinden und dazu (W3C-konform) NICHT den Befehl innerHTML verwenden.

    Abgesehen davon, dass es eine Eigenschaft ist - warum nicht?
    Damit "funzt" es wenigstens.

    Mein Problem ist nun: Mit Firefox funktionieren beide Methoden (innerHTML und DOM) gleich gut, mit IE 6.0 bekomme ich mit der DOM-Methode keine Anzeige. Ich habe bereits ueber die Probleme von IE mit dem setAttribute-Befehl gelesen und diesen Befehl komplett entfernt; auch zeigen die (momentan wegkommentierten) Alert-Ausgaben, dass alle Attribute korrekt gesetzt sind.

    Als ich mal ein bisschen mit sFIR herumgespielt habe, hab' ich auch die Erfahrung gemacht, dass das im IE nicht "funzt" - das Anlegen der Param-Elemente war IIRC die Krux. Selbst wenn er dir die in einer anschliessenden Kontrollausgabe als vollkommen korrekt ins Dokument eingefuegt anzeigt - beruecksichtigen tut er sie trotzdem nicht.

    Wie schaffe ich es, diesen Code standardkonform bleibt und TROTZDEM funktioniert?

    Zunaechst mal: Bei dem, was die aktuellen Browser an JavaScript unterstuetzen/umsetzen, kann von "Standard" eh weniger die Rede sein - "reines" JavaScript ist kaum vernuenftig standardisiert (ECMAScript, auf dem es basiert, schon eher). Gut, DOM etc. sind standardisiert - aber der reine Sprachkern eben ist eher "historisch gewachsener" Krempel.

    .innerHTML unterstuetzen alle aktuellen Browser.

    Also wuerd' ich's diesbezueglich einfach mal mit Doc Brown halten: "Ich hab mir gesagt - pfeiff' drauf!"

    MfG ChrisB

    1. Hallo Chris,

      Als ich mal ein bisschen mit sFIR herumgespielt habe, hab' ich auch die Erfahrung gemacht, dass das im IE nicht "funzt" - das Anlegen der Param-Elemente war IIRC die Krux. Selbst wenn er dir die in einer anschliessenden Kontrollausgabe als vollkommen korrekt ins Dokument eingefuegt anzeigt - beruecksichtigen tut er sie trotzdem nicht.

      dieses Verhalten ist von Microsoft dokumentiert.

      Freundliche Grüße

      Vinzenz

      1. Hi Vinzenz,

        dieses Verhalten ist von Microsoft dokumentiert.

        Hm, wo da genau?

        Ich finde nur die Aussage

        If you must use innerHTML to create elements in the document, create only those elements that are not available through the DOM (param is one example)

        Warum Param nicht ueber's DOM "available" ist, erschliesst sich mir daraus aber nicht.

        Oder meinst du mit "dokumentiert", dass MS hier mal wieder in einem Nebensatz beilaeufig erwaehnt hat, "that's how it is. Period." ...? :-)

        MfG ChrisB

  2. Hallo,

    Ich moechte kleine Flash-Videos dynamisch auf meiner Webseite einbinden und dazu (W3C-konform) NICHT den Befehl innerHTML verwenden.

    Und was bringt dir dieses Dogma? Nimm innerHTML und gut ist. Das geheiligte W3C wird innerHTML mit HTML 5 übrigens standardisieren.

    Mathias

  3. Hallo,

    Auch auf die Gefahr hin, das diese Frage schon haeufig gestellt wurde ...

    wohl wahr, trotzdem finde gerade nicht so schnell die besten Links dazu. Deswegen nur diese:
    name Property, beachte die Remarks!

    oder einer von vielen aus dem Archiv

    Gruß plan_B

    --
         *®*´¯`·.¸¸.·