Aggiunge dinamicamente tag script con src che può includere document.write

Question

Desidero includere dinamicamente un tag script in una pagina Web, ma non ne ho il controllo su src so src = "source.js" può assomigliare a questo.

document.write('<script type="text/javascript">') 
document.write('alert("hello world")') 
document.write('</script>') 
document.write('<p>goodbye world</p>') 

Ora ordinariamente mettere

<script type="text/javascript" src="source.js"></script> 

nella testa funziona bene, ma c'è un altro modo posso aggiungere source.js utilizzando dinamicamente qualcosa come innerHTML?

jsfiddle of what i've tried

Answer 1

var my_awesome_script = document.createElement('script'); 

my_awesome_script.setAttribute('src','http://example.com/site.js'); 

document.head.appendChild(my_awesome_script); 

Answer 2

È possibile utilizzare la funzione document.createElement() in questo modo:

function addScript(src) { 
    var s = document.createElement('script'); 
    s.setAttribute('src', src); 
    document.body.appendChild(s); 
} 

Answer 3

There Is Onload funzione che viene chiamata quando Script caricare correttamente:

function addScript(src,callback) { 
    var s = document.createElement('script'); 
    s.setAttribute('src', src); 
    s.onload=callback; 
    document.body.appendChild(s); 
} 

Answer 4

un bel po ' script che ho scritto per caricare più script:

function scriptLoader(scripts, callback) { 

    var count = scripts.length; 

    function urlCallback(url) { 
     return function() { 
      console.log(url + ' was loaded (' + --count + ' more scripts remaining).'); 
      if (count < 1) { 
       callback(); 
      } 
     }; 
    } 

    function loadScript(url) { 
     var s = document.createElement('script'); 
     s.setAttribute('src', url); 
     s.onload = urlCallback(url); 
     document.head.appendChild(s); 
    } 

    for (var script of scripts) { 
     loadScript(script); 
    } 
}; 

utilizzo:

scriptLoader(['a.js','b.js'], function() { 
    // use code from a.js or b.js 
}); 

Answer 5

l'unico modo per farlo è quello di sostituire document.write con la propria funzione, che aggiungerà elementi al fondo della pagina. E 'abbastanza semplice con jQuery:

document.write = function(htmlToWrite) { 
    $(htmlToWrite).appendTo('body'); 
} 

Se avete html venire a document.write a pezzi, come nell'esempio domanda avrete bisogno di tamponare le htmlToWrite segmenti. Forse qualcosa di simile:

document.write = (function() { 
    var buffer = ""; 
    var timer; 
    return function(htmlPieceToWrite) { 
    buffer += htmlPieceToWrite; 
    clearTimeout(timer); 
    timer = setTimeout(function() { 
     $(buffer).appendTo('body'); 
     buffer = ""; 
    }, 0) 
    } 
})() 

Answer 6

Puoi provare a seguire il seguente frammento di codice.

function addScript(attribute, text, callback) { 
    var s = document.createElement('script'); 
    for (var attr in attribute) { 
     s.setAttribute(attr, attribute[attr] ? attribute[attr] : null) 
    } 
    s.innerHTML = text; 
    s.onload = callback; 
    document.body.appendChild(s); 
} 

addScript({ 
    src: 'https://www.google.com', 
    type: 'text/javascript', 
    async: null 
});