MICHELEPISANI.IT
 

Soluzione al problema della mancata esecuzione dello script

Caricare Bottoni e Widget di Twitter in modo Asincrono sul proprio blog

Giugno 06
07:102015

Con l'adeguamento alla normativa sui cookie mi sono trovato a dovermi inventare una soluzione per quanto riguarda gli elementi social, si veda anche l'articolo "Cookie policy: come gestire Google Analytics, AdSense e i bottoni Social", (il Like-Box di Facebook ed il widget di Twitter in primis) presenti sul mio blog e sui siti che gestisco. Pensandoci ho concluso che ritardare il caricamento di bottoni e widget e farli apparire allo scroll della pagina in modo asincrono mi permettesse di prendere due piccioni con una fava, oltre all'adeguamento alla normativa anche un lieve miglioramento nei tempi di caricamento delle pagine.

Mentre, però, il Like-Box di Facebook è un iframe e caricandolo tramite Ajax non ha sollevato alcun problema, il widget di Twitter contiene uno script in Javascript ed al suo richiamo nella pagina il box con gli ultimi tweet ed il bottone "segui" non apparivano.

Il problema non poteva essere altro che la mancata esecuzione dello script, infatti controllando sulle specifiche W3C per l'oggetto XMLHttpRequest si può leggere:

"Scripts in the resulting document tree will not be executed, resources referenced will not be loaded and no associated XSLT will be applied."

In pratica quanto sospettato. Cercando in rete mi sono reso conto che questo è un problema noto e molti sono riusciti a risolvere modificando lo script fornito da Twitter ed aggiungendo l'opzione js.async=true;, inutile dire che a me non ha funzionato.

Sono invece riuscito a risolvere il problema optando per l'utilizzo della funzione eval() allo script in questione (interpretato come testo). Aiutato da jQuery è stato facile individuare lo script nel contenuto di ritorno al quale associare la funzione ed il risultato è stato immediato.

Di seguito il codice che utilizzo sul mio blog e che quindi certifico come funzionante:

Widget di Twitter inserito in una pagina statica, chiamiamola twitter-widget.html (ognuno avrà il proprio script recuperato dall'account personale di Twitter, riporto il mio a titolo di esempio):

<h3>Seguimi su Twitter</h3><a class="twitter-timeline" href="https://twitter.com/michelepisani80" data-widget-id="557326679178485760">Tweet di @michelepisani80</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>

Nella pagina chiamante avrò il contenitore nel quale dovrà apparire il widget e che identifico con un id:

<div id="mp_twitter_timeline"></div>

A questo punto possiamo richiamare il codice asincrono necessario che si avvierà allo scroll della pagina (ma a seconda delle esigenze potrebbe essere avviato ad esempio direttamente all'onload):

$(window).one("scroll", function (e) {

	$.ajax({
		url: "/percorso_file/twitter-widget.html",
		context: document.body,
		success: function(responseText) {
			$("#mp_twitter_timeline").html(responseText);
			$("#mp_twitter_timeline").find("script").each(function(i) {
				eval($(this).text());
			});
		}
	});
  
});

Lo script di cui sopra non fa altro che cercare nella risposta alla chiamata Ajax, inserita all'interno del contenitore target, i tag script e per ciascuno di essi (in questo caso ce n'è solo uno), ne esegue il contenuto Javascript testuale con la funzione eval() permettendoci di ottenere il risultato cercato.

 

Tags
Condividi

Autore

Michele Pisani

Michele Pisani

Ho uno spiccato orientamento al problem-solving, se è troppo facile non mi diverto :)
Credo nella volontà e nel cambiamento perchè hanno fatto della mia passione il mio pane quotidiano.
Se devo descrivermi con una sola parola direi... "Concretezza", la mia stretta di mano è una garanzia.

0 Commenti

Non ci sono commenti

Nessuno ha ancora commentato questo articolo, fallo tu per primo!

Scrivi un Commento

Scrivi un Commento

Il tuo indirizzo email non sarà pubblicato.
I campi contrassegnati da un * sono obbligatori

Articoli e Argomenti correlati

Categorie popolari

Iscriviti alla mia newsletter

La tua e-mail con me sarà al sicuro.
Non fornirò mai le tue informazioni a nessuno!

Ultimi commenti

Michele

Ciao Antonio,
ma il tuo apk si chiama 'HelloWorld-release-unsigned.apk'?

Antonio

Grazie michele per la velocità con cui hai risposto, comunque ho seguito la tua guida passo per …

Michele

Ciao Antonio,
probabilmente stai utilizzando un'opzione non prevista per jarsigner e la …

Antonio

Ricevo questo errore da cosa dipende? Illegal option\: …