ugrás a tartalomhoz

javascript, css becsatolása javascript-el, futás időben

toxin · 2006. Dec. 19. (K), 08.04
tegnap kutattam a js alatti, futásidőben használható js,css becsatolása után (js runtime include) ez kiindulásnak használható

http://www.phpied.com/javascript-include-ready-onload/

var css;
function include_css(css_file) {
    var html_doc = document.getElementsByTagName('head')[0];
    css = document.createElement('link');
    css.setAttribute('rel', 'stylesheet');
    css.setAttribute('type', 'text/css');
    css.setAttribute('href', css_file);
    html_doc.appendChild(css);

    // alert state change
    css.onreadystatechange = function () {
        if (css.readyState == 'complete') {
            alert('CSS onreadystatechange fired');
        }
    }
    css.onload = function () {
        alert('CSS onload fired');
    }
    return false;
}

var js;
function include_js(file) {
    var html_doc = document.getElementsByTagName('head')[0];
    js = document.createElement('script');
    js.setAttribute('type', 'text/javascript');
    js.setAttribute('src', file);
    html_doc.appendChild(js);

    js.onreadystatechange = function () {
        if (js.readyState == 'complete') {
            alert('JS onreadystate fired');
        }
    }

    js.onload = function () {
        alert('JS onload fired');
    }
    return false;
}
egyenlőre ott akadtam el, hogy : egyrészt ahogy írják is utolsó kommentben
js.readyState == 'loaded'

müxik nekem is. Másrészt ha gyorstárból jön a kód akkor, hogy lehetne megoldani ugyanezt. Fenti eseménykezelő nyilván már nem használható :S , magyarán js class-ok inicializáló metódusát (new fooClass1-2-3(); stb, minden behúzandó js fájlban egy prototype class-van) hogyan lehetne lefutatni, ha már böngésző gyorstárból jön file/class ? :S Majd még írok példát, mert csak a probléma megfogalmazásáig jutottam tegnap :) (meg most) .

üdv t

ui: elnézést, ha zagyva most keltem :)
‹ div position elcsúszás újabb browserekben Tab-váltás figyelése ›
 ■
1

Bootstrap

toxin · 2006. Dec. 19. (K), 08.12

var Bootstrap = Class.create();
	Bootstrap.prototype = {
		
		initialize : function(){
			language = {};
			templates = {};
			header = {};
			currencies = {};
			var js;
			 
			this.loadedComponentCounter = 0;			
			this.appComponents = [
				'/air/js/core/Layout.js',
				'/air/js/core/Application.js',
				'/air/js/core/Results.js',
				'/air/js/core/Filter.js',
				'/air/js/core/Preloader.js',
				'/air/js/core/utils.js',
				'/air/js/logger.js',		
			];	
				
			this.loader();
		
		},
		 
		loader : function(){			
			
			js = document.createElement('script');
			js.setAttribute('type', 'text/javascript');
			
		    js.setAttribute('src', this.appComponents[this.loadedComponentCounter]);
			
			this.html_doc = document.getElementsByTagName('head')[0];	
		    this.html_doc.appendChild(js);	
			
			//JS inclusion - IE fires onreadystatechange. FF fires onload. 
			//Both will execute the script before firing the event.			
		    js.onreadystatechange = function () {				
				if (js.readyState == 'loaded') {
					this.loadNextComponents.bind(this)();		           
		        }
		    }.bind(this);	
			
		    js.onload = function () {
		        this.loadNextComponents.bind(this)();
		    }.bind(this);
			
		    return false;			
			
		},
		
		loadNextComponents : function(){
			switch (this.loadedComponentCounter)
			{
				case 0 : layout = new Layout(); break;
				case 1 : app = new Application(); break;
				case 2 : results = new Results(); break;
				case 3 : filter = new Filter(); break;
				case 4 : preloader = new Preloader(); break;
				default : break;				
			}
			
			if (this.loadedComponentCounter != this.appComponents.length-1)
			{				
				this.loader(this.loadedComponentCounter++);
			} 			
			return true;
		}
		
	}
még gáz a kód (elösször odáig akartam eljutni, hogy müxik, lehetőleg ne abba kössetek bele :) ), de ez se müxik ha már gyorstárból jön, egyébként igen , ha van akinek van gondolata, hajrá (de majd nyálazom a manuált bőszen én is + gugli :)) )

üdv t
2

folyt.

toxin · 2006. Dec. 19. (K), 11.31
na kezd a dolog blog jelleget ölteni :) szóval probléma IE alatt jelentkezik, mert holmáshol, lényeg hogy a fenti DOM alapú script becsatoláskor, nem kapok 'complete' státuszt, magyarán betölti, de nem hajtja végre a becsatolt js fájt (loaded-ig eljut)

http://msdn.microsoft.com/workshop/author/dhtml/reference/properties/readyState_1.asp

csak ha beírom html-be, lásd alább

loader : function(){
			if ((navigator.appName == "Netscape"))
			{
				js = document.createElement('script');
				js.setAttribute('type', 'text/javascript');
				
			    js.setAttribute('src', this.appComponents[this.loadedComponentCounter]);
				
				this.html_doc = document.getElementsByTagName('head')[0];	
			    this.html_doc.appendChild(js);
				
				js.onload = function () {
		        	this.loadNextComponents.bind(this)();
		    	}.bind(this);
			}
			else if (navigator.appName == "Microsoft Internet Explorer")
			{
			  	document.write("<scr"+"ipt id=__ie_onload defer src="+this.appComponents[this.loadedComponentCounter]+"><\/scr"+"ipt>");
      		  	js = document.getElementById("__ie_onload");
				  
		  	    js.onreadystatechange = function () {
				if (js.readyState == 'complete') {
					this.loadNextComponents();		           
		        }
		    	}.bind(this);			
			}
de mostmeg az objektum inicializálás nem fut le, IE alatt :)) , sajna itt abba kellett hagynom, mert a team többi része is szeretne ma dolgozni, szóval marad a
<script type="text/javascript" language="JavaScript" src="/air/js/core/Layout.js" charset="utf-8"></script>
.
.

:D , majd csinálok vmi kis próbarendszert a becsatoláshoz

üdv t