Come forzare lo script a ricaricare e rieseguire?

Question

Ho una pagina che sta caricando uno script da una terza parte (news feed). L'URL src per lo script viene assegnato dinamicamente al caricamento (per codice di terze parti).

<div id="div1287"> 
    <!-- dynamically-generated elements will go here. --> 
</div> 

<script id="script0348710783" type="javascript/text"> 
</script> 

<script type="javascript/text"> 
    document.getElementById('script0348710783').src='http://oneBigHairyURL'; 
</script> 

Lo script caricato da http://oneBigHairyURL crea quindi e carica gli elementi con le varie cose dalla news feed, con la bella formattazione, ecc in div1287 (il "div1287" Id viene passato http://oneBigHairyURL modo lo script sa dove caricare il contenuto).

L'unico problema è che lo carica solo una volta. Mi piacerebbe ricaricare (e quindi visualizzare nuovi contenuti) ogni n secondi.

Così, ho pensato di provare questo:

<div id="div1287"> 
    <!-- dynamically-generated elements will go here. --> 
</div> 

<script id="script0348710783" type="javascript/text"> 
</script> 

<script type="javascript/text"> 
    loadItUp=function() { 
     alert('loading...'); 
     var divElement = document.getElementById('div1287'); 
     var scrElement = document.getElementById('script0348710783'); 

     divElement.innerHTML=''; 
     scrElement.innerHTML=''; 
     scrElement.src=''; 
     scrElement.src='http://oneBigHairyURL'; 
     setTimeout(loadItUp, 10000); 
    }; 
    loadItUp(); 
</script> 

ricevo l'avviso, il div cancella, ma non in modo dinamico-HTML generato viene ricaricato ad esso.

Qualche idea su cosa sto facendo male?

Answer 1

Come aggiungere un nuovo tag script a < head> con lo script da (ri) caricare? Qualcosa come di seguito:

<script language="text/javascript"> 
    function load_js() 
    { 
     var head= document.getElementsByTagName('head')[0]; 
     var script= document.createElement('script'); 
     script.type= 'text/javascript'; 
     script.src= 'source_file.js'; 
     head.appendChild(script); 
    } 
    load_js(); 
</script> 

Il punto principale è l'inserimento di un nuovo tag script - è possibile rimuovere il vecchio senza conseguenze. Potrebbe essere necessario aggiungere un timestamp alla stringa di query se si verificano problemi di memorizzazione nella cache.

Answer 2

Hai provato a rimuoverlo dal DOM, quindi inserirlo di nuovo?

Ho appena fatto, che non funziona. Tuttavia, la creazione di un nuovo tag script e la copia dei contenuti del tag script esistente, quindi l'aggiunta, funziona bene.

Vedi il mio esempio http://jsfiddle.net/mendesjuan/LPFYB/

var scriptTag = document.createElement('script'); 
scriptTag.innerText = "document.body.innerHTML += 'Here again ---<BR>';"; 
var head = document.getElementsByTagName('head')[0]; 
head.appendChild(scriptTag); 

setInterval(function() { 
    head.removeChild(scriptTag); 
    var newScriptTag = document.createElement('script'); 
    newScriptTag.innerText = scriptTag.innerText; 
    head.appendChild(newScriptTag); 
    scriptTag = newScriptTag;  
}, 1000); 

Questo non funziona se ci si aspetta lo script di cambiare ogni volta, che credo sia il tuo caso. Dovresti seguire il suggerimento di Kelly, basta rimuovere il vecchio tag script (solo per mantenere il DOM slim, non influenzerà il risultato) e reinserire un nuovo tag script con lo stesso src, più un cachebuster.

Answer 3

Ecco un metodo simile a quello di Kelly ma rimuoverà qualsiasi script preesistente con la stessa fonte e utilizza jQuery.

<script> 
    function reload_js(src) { 
     $('script[src="' + src + '"]').remove(); 
     $('<script>').attr('src', src).appendTo('head'); 
    } 
    reload_js('source_file.js'); 
</script> 

Si noti che l'attributo 'tipo' non è più necessario per gli script di HTML5. (http://www.w3.org/html/wg/drafts/html/master/scripting-1.html#the-script-element)

Answer 4

Piccolo tweak per la risposta di Luca,

function reloadJs(src) { 
    src = $('script[src$="' + src + '"]').attr("src"); 
    $('script[src$="' + src + '"]').remove(); 
    $('<script/>').attr('src', src).appendTo('body'); 
} 

e chiamarlo come,

relaodJs("myFile.js"); 

Questo non avrà problemi relativi percorsi.