SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Member
    Join Date
    Nov 2007
    Posts
    10
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    on demand javascript Script Tag Creation for auto audio player

    I have a web page at http://hannakroegerhealer.t35.com/si.../audiotest.htm
    which is designed to load a flash mp3 player after the user clicks listen to audio.
    The onclick event causes a script tag to be created in the html docs head section, which downloads the javascript code: swobject.js to be downloaded.

    The reason it is done like this rather than just insert the code from the very beginning in the html's head statement is that I want to minimize the load time of the page, and only bring in on demand javascript as is necessary.

    The page above is designed to load the javascript which creates the flash object on demand.
    It works in IE 7.0.

    Here is the html and code in question:
    [rule]purple[/rule]
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Hanna Kroeger Healer: Audio test</title>
    <script type="text/javascript">
    	var http = "http://hannakroegerhealer.t35.com";
    	var mp3  = "HannaKroegerHealerHomePage01.mp3";
    	var callback = "addflashplayer();";
    function listenaudio() {
    	addScript(http + "/script/swfobject.js");
    	//alert("came back from listen audio");
    	//addflashplayer();
    	return false;
    }
    function addflashplayer() {
       var so = new SWFObject(http + "/swf/playerSingle.swf", "mymovie", "192", "67", "7", "#FFFFFF");
       so.addVariable("autoPlay", "yes");
       so.addVariable("soundPath", http + "/mp3/" + mp3);
       so.addVariable("overColor", "#FDECFF");
       so.write("flashPlayer");
    }
    function addScript(url) {
    	var scriptTag = document.createElement("script");
    	scriptTag.setAttribute("type", "text/javascript");
    	scriptTag.setAttribute("src", url);
    	document.getElementsByTagName("head")[0].appendChild(scriptTag);
    	if (scriptTag.readyState == "loaded") {
    		eval(callback);
    		scriptTag.onreadystatechange = null;
    	} else {
    		scriptTag.onreadystatechange = function () { checkAgain(scriptTag)};
    	}
    }
    function checkAgain(scriptTag) {
    	if (scriptTag.readyState == "loaded") {
    		eval(callback);
    		scriptTag.onreadystatechange = null;
    	}
    }
    function alertdone() {
    	alert("done loading");
    }
    </script>
    </head>
    div id="flashPlayer"><a href="#" onclick="return listenaudio();">Listen To Audio</a></div>
    </body>
    <html>
    The source of some of this code is from:
    http://ajaxpatterns.org/archive/On-D...Javascript.php
    http://dangermoose.blogspot.com/2005...s-revised.html
    This technique looks to be called the Script Tag Hack, or on-demand javascript.

    It would of course defeat the point to use some Javascript library that is so large, just to save 6K of javascript loaded on demand.

    The script above does not work properly.
    It does not work properly in FireFox. Does not work at all in IE 6.0.
    It works in IE 7.0.
    It can be modified to work with two clicks in FireFox because the first click loads the object, and generates an error. The 2nd click then executes the swf object creation.

    I think this may have to do with the asynchronous call to create the javascript.

    I would be very grateful for any help.

  2. #2
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    Why don't you place the swobject script call at the very end of the body. That way the rest of the page will have loaded beforehand, and it's much more likely to work in a cross-browser environment.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  3. #3
    SitePoint Member
    Join Date
    Nov 2007
    Posts
    10
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    As far I as I know, and I may confirm this, any script tags even at the end at the end of the html doc before the body tag, will need to be loaded before the rendering of the html because they can have document.write.

    I believe I also recently saw this as well.

    There appears to be no asynchronous loading in FF, but in IE 6 there is, as well as IE 7.

    Unfortunately IE7 as yet is the only one which creates the flash object properly.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •