Javascript in AJAX con Internet Explorer: l’attributo defer

Spesso molti framework o anche applicazioni home-made, utilizzano l’attributo innerHTML per inserire le risposte AJAX del server nella pagina. Ma se questa risposta è dell’HTML che magari contiene uno script Javascript, Internet Explorer non vede e non esegue nulla.

Vediamo un esempio: questa semplice risposta del server deve essere inserita come HTML in un elemento del documento.

<p>Caricamento in corso</p>
<script type='text/javascript'>
  alert('azione eseguita');
</script>

Verrebbe naturale caricare questo codice con innerHTML, ad esempio:

div.innerHTML = response;

Chiaramente bisogna sempre assicurarsi che il codice sia valido e non suscettibile di XSS, ma questo discorso esula dal presente articolo.

In ogni caso, Internet Explorer, NON eseguirà il codice né quindi visualizzerà l’alert; questo è un comportamento documentato ma ugualmente molto noioso, perché difficile da ricordare e perché in altri browser, come Firefox, non si presenta.

La soluzione ha questo problema è specificare l’attributo defer all’elemento script, facendolo diventare così:

<p>Caricamento in corso</p>
<script type='text/javascript' defer='defer'>
  alert('azione eseguita');
</script>

Solo in questo modo IE interpreterà correttamente lo script e lo eseguirà alla fine della chiamata innerHTML.

Ti potrebbero interessare anche:

1. Guida per installare l’add-on Greasemonkey su Firefox per personalizzare siti internet
2. La pericolosità di internet
3. Tavolozza dei colori in Javascript
4. Parole (\w+) con lettere accentate nelle regular expression Javascript
5. Migliorare il codice Javascript: indentazione, spazi, tabulazione, a capo e formattazioni