Includere js dinamicamente

E’ sempre stato un problema fare chiamate asincrone ad un file js esterno. Un problema così grande che di solito comportava l’abbandono dell’idea. La compatibilità coi browser era infatti poca, soprattutto con Safari, e nemmeno Prototype aveva una soluzione (il metodo evalScripts non esegue file remoti). Oggi ho finalmente trovato in rete una soluzione: si chiama ScriptLoader ed è stata creata da James Starmer.

http://www.jamesstarmer.com/2007/07/13/dynamic-script-loader/

EDIT:

Trovando un po’ scomodo il metodo di caricamento, ho fatto una bella funzioncina very simple very easy… magari lo farò finire nel mio jPrototype ;)

<script>
function jLoad(q) {
var type,loader=new ScriptLoader();
if(arguments.length>1){
type=(arguments[1]==’type’)?’ type=”text/javascript”‘:”;
}else type=”;
q.each(function(url){
loader.loadScripts(‘<script src=”‘+url+’”‘+type+’></s’+'cript>’);
});
}

// Qualche esempio:

jLoad([
"xhtmlbanner.js"
],’type’);

jLoad([
"/js/scriptaculous.js",
"/js/jPrototype.js"
]);

</script>

Link ad una popup funzionante anche con JS disabilitato

Di solito un link ad una popup viene fatto così:

<script>
function apriGoogleIt(){
window.open(‘http://www.google.it’,'_blank’);
}
</script>
<a href=”javascript:apriGoogleIt()”>Apri Google Italia</a>

oppure così:

<a href=”javascript:;” onclick=”window.open(‘http://www.google.it’,'_blank’)”>Apri Google Italia</a>

In caso di javascript disabilitato, però, il link non funzionerà più. Inoltre, nel secondo caso dovrebbe essere previsto anche il caso “onkeypress”. E’ possibile far funzionare lo stesso sia con JS abilitato che con JS disabilitato, anche se in caso di JS OFF il sito non verrà mostrato in popup, ma sempre meglio di niente:

<a href=”http://www.google.it’” onclick=”window.open(this.href,’_blank’);return false;” onkeypress=”this.onclick();return false;”>Apri Google Italia</a>

EDIT:

Se volete assolutamente aprire una nuova finestra anche con JS disabilitato, e non avete problemi di accessibilità o XHTML, potete sempre ricorrere a SCRIPT e NOSCRIPT:

<script>
document.write(‘<a href=”http://www.google.it’” onclick=”window.open(this.href,’_blank’);return false;” onkeypress=”this.onclick();return false;”>Apri Google Italia</a>’) ;
</script>
<noscript>
<a href=”http://www.google.it’” target=”_blank”>Apri Google Italia</a>
</noscript>

Comprimere JavaScript: ne vale la pena?

Se guardiamo il peso, sì. Per fare un esempio, si passa facilmente da 100k a 40k, che non è affatto male visto che si sta andando in direzione di script sempre più corposi per merito di AJAX. Facendo una svogliata ricerca su Gooogle e facendo qualche rapido test, ho deciso che il miglior compressore è il Packer di Dean Edwards. Ma c’è qualche svantaggio?

Uno. Il problema della compressione JavaScript è la manutenzione: bisogna sempre conservare una doppia versione dello script, comprimerlo ogni volta e testarlo, perdendo tempo nel sistemare banali errori dovuti dalla compressione (ad esempio dopo ogni “}” bisogna mettere un “;”)

La soluzione più semplice, e a mio avviso la migliore in assoluto, è ibrida: comprimere le librerie e non comprimere gli script da noi creati. Ma che noia comprimere ogni volta la nuova release di Prototype e Scriptaculous!! Per fortuna esiste qualcuno che s’è preso la briga di farlo al posto nostro, creando queste valide alternative:

• ProtoPacked (ufficiale)
• Protoculous (sembra un po’ più aggiornato, FORSE…)
• Prototype and Scriptaculous Compressed (non molto aggiornato)

Esistono anche le versioni compresse di altri frameworks AJAX: cercatele, usatele e non ve ne pentirete!