[JS] Generated content word niet weergegeven in IE7

[Barracuda_82]

Ik ben bezig een plugin te maken voor jQuery die de content van een DIV vervangt door een mediaplayer (flash media player 3.8 van Jeroen Wijering). De strong die hier uit komt word in een DIV geplaatst met jQuery. Dit werkt in FF natuurlijk goed, maar in IE7 en Safari werkt het niet. Ik heb een voorbeeldje gemaakt:

http://home.insiders.nl/johan/jMediaPlayer/test.html

In de eerste DIV (met rood kader) wordt de URL die erin staat vervangen door de player, in de textarea (met groen kader) wordt de string geplaatst en in de laatste DIV (ook met rood kader) heb ik de string gezet die de JS genereerd, alleen dan hard in de HTML (zie de source).

Het stukje JS code dat de string plaatst:

JavaScript:

return this.each(function(){
        var filename = options.filepath + jQuery(this).html();
        var mp3html = '\n\n<script type="text/javascript">\n';
        mp3html += '  var s1 = new SWFObject("mediaplayer.swf","single","' + options.width + '","' + options.height + '","7");\n';
        mp3html += '  s1.addParam("allowfullscreen","true");\n';
        mp3html += '  s1.addVariable("file","'+filename+'");\n';
        mp3html += '  s1.addVariable("height","' + options.height + '");\n';
        mp3html += '  s1.addVariable("width","' + options.width + '");\n';
        mp3html += '  s1.addVariable("frontcolor","0x' + options.fgcolor + '");\n';
        mp3html += '  s1.addVariable("backcolor","0x' + options.bgcolor + '");\n';
        mp3html += '  s1.addVariable("lightcolor","0x' + options.hlcolor + '");\n';
        mp3html += '  s1.addVariable("largecontrols","' + options.largecontrols + '");\n';
        mp3html += '  s1.addVariable("logo","' + options.logo + '");\n';
        mp3html += '  s1.addVariable("showeq","' + options.showeq + '");\n';
        mp3html += '  s1.addVariable("autostart","' + options.autostart + '");\n';
        mp3html += '  s1.addVariable("bufferlength","' + options.bufferlength + '");\n';
        mp3html += '  s1.addVariable("repeat","' + options.repeat + '");\n';
        mp3html += '  s1.addVariable("volume","' + options.volume + '");\n';
        mp3html += '  s1.write("player1");\n';
        mp3html += '</script>\n';
        jQuery(this).html('Player:'+mp3html);
        document.getElementById('debug').value = mp3html;
        if(jQuery.browser.msie){ this.outerHTML = this.outerHTML; }
    });

[soulrider]

javascript kan je niet zomaar als innertext of innerhtml achterna inladen.

zoek effe op

ajax async javascript laden.

je gaat moeten werken met de DOM.
(zijn al enkele topics over ook)

maar denk aan

code:

document.head.appendchild(javacode)

(is een tip, niet de exacte oplossing)

[Barracuda_82]

soulrider schreef op woensdag 13 juni 2007 @ 17:12:
javascript kan je niet zomaar als innertext of innerhtml achterna inladen.

zoek effe op

ajax async javascript laden.

je gaat moeten werken met de DOM.
(zijn al enkele topics over ook)

maar denk aan

code:

document.head.appendchild(javacode)

(is een tip, niet de exacte oplossing)

Ik ben nu al de hele ochtend aan het zoeken en proberen, maar ik kom er echt niet uit!

Weet je misschien een specifiekere pagina of topic waar dit in uitgelegd word?

* Barracuda_82 is een beetje JS noob!

[soulrider]

deze bijvoorbeeld:
http://www.burnette.us/bl...oad-JS-into-Document-Head

en anders gaat 'using ajax to load js' wellicht nog een paar mooie oplossing uitgeven via *searchengine* .

anderzijds vraag ik me ook wat af waarom je met javascript, javascript gaat invoegen die op zijn beurt weer ergens een flash-object gaat uitgeven.
(alhoewel ik beperkt zelf ook zo wel opstellingen gebruik - dus zo heel erg is het niet )

(denk eraan: javascript kan best in je html-head staan, en functie oproepen in het body-gedeelte.)

en waarom laat je deze funtie al niet direct je flash-object schrijven ? ?

(zover ik merk ga je nu op de plaats waar de flash moet komen een hoop javascript neer poten die dan ev. alsnog je flash er hene vlamt...)

hopelijk geraak je hiermee een pak verder - en krijg je het ook in IE werkend.


ps: de link die ik je net gegeven heb is eentje die makkelijk ombuigbaar is naar toepassing naar ipv coldfusion aan server zijde bv jsp, php, asp, of een andere javascript.
't is maar om het idee en oplossing duidelijk te maken.

[ Voor 11% gewijzigd door soulrider op 14-06-2007 12:33 ]

[Barracuda_82]

Ik heb het probleem inmiddels opgelost door de flashobject direct weg te laten schrijven. Ik had dat gisteren al een keer geprobeerd, maar dat werkte niet (waarschijnlijk door een stomme typfout) en ben daarom daar niet verder in gaan zoeken. De definitieve code ziet er zo uit:

JavaScript:

jQuery.fn.jmediaplayer = function(passedOptions){
    var playerpath = "/swf/";               // SET THIS FIRST: path to mediaplayer.swf

    var options = {
          "filepath": "",                   // path to file [path]
          "width": "320",                   // width [int]
          "height": "240",                  // height [int]
          "fgcolor": "",                    // foreground color (buttons, slider, etc) [hex]
          "bgcolor": "",                    // background color (toolbar, etc) [hex]
          "hlcolor": "",                    // highlight color (hovercolor for elements) [hex]
          "largecontrols": "false",         // double size controls [true/false]
          "logo": "",                       // logo (like on television) [url]
          "showeq": "false",                // show an equalizer over the video/audio/image [true/false]
          "autostart": "false",             // automatically start playing [true/false]
          "bufferlength": "5",              // seconds to buffer before playing [int]
          "repeat": "false",                // repeat the video/audio [true/false]
          "volume": "80"                    // volume at start [int]
    };
    
    if (passedOptions) {
          jQuery.extend(options, passedOptions);
    }
    
    return this.each(function(){
          var filename = options.filepath + jQuery(this).html();
          var s1 = new SWFObject("mediaplayer.swf","single",options.width,options.height,"7");
          s1.addParam("allowfullscreen","true");
          s1.addVariable("file",filename);
          s1.addVariable("height",options.height);
          s1.addVariable("width",options.width);
          s1.addVariable("frontcolor",'0x' + options.fgcolor);
          s1.addVariable("backcolor",'0x' + options.bgcolor);
          s1.addVariable("lightcolor",'0x' + options.hlcolor);
          s1.addVariable("largecontrols",options.largecontrols);
          s1.addVariable("logo",options.logo);
          s1.addVariable("showeq",options.showeq);
          s1.addVariable("autostart",options.autostart);
          s1.addVariable("bufferlength",options.bufferlength);
          s1.addVariable("repeat",options.repeat);
          s1.addVariable("volume",options.volume);
          s1.write(this.id);
    });
};

Vanuit de pagina roep je dit zo aan:

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
  <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
  <link type="text/css" rel="stylesheet" href="main.css" />
  <title>jMediaPlayer Plugin TEST</title>
  <script language="javascript" type="text/javascript" src="jquery.js"></script>
  <script language="javascript" type="text/javascript" src="jMediaPlayer.js"></script>
  <script language="javascript" type="text/javascript" src="swfobject.js"></script>
  
  <script type="text/javascript">
  $(document).ready(function(){
    $(".mediaplayer").jmediaplayer({
      "filepath": "http://home.batcave.nl/johan/jMediaPlayer/media/",
        "width": "320",
        "height": "240",
        "fgcolor": "FFFFFF",
        "bgcolor": "F0037F",
        "hlcolor": "FFFFFF",
        "largecontrols": "false",
        "logo": "",
        "showeq": "false",
        "autostart": "false",
        "bufferlength": "10",
        "repeat": "false",
        "volume": "100"
    });
  });
  </script>
  
</head>
<body>

<div id="player1" class="mediaplayer" style="border: 1px solid #F00">video.flv</div>
<br />

<div id="player2" class="mediaplayer" style="border: 1px solid #F00">barsandtone.flv</div>
<br />

<div id="player3" class="mediaplayer" style="border: 1px solid #F00">20051210-w50s.flv</div>
<br />


</body>
</html>

De testpagina is geupdate. De plugin werkt in IE7, FF2 en Safari. Straks/vanavond even wat documentatie schrijven, op mijn website zetten en de plugin toevoegen aan de pluginlijst van jQuery. Ik hoop dat iemand er dan iets aan heeft.

[soulrider]

thanx voor de update en het delen van de oplossing voor anderen
die er ev. ook naar op zoek gaan in de toekomst.