¿Cómo cargo un archivo javascript dinámicamente?

Question

tengo este código:

<script type="text/javascript"> 
    function js() { 
     var getJs = document.getElementById("jogo"); 

     if (JS == true) { //if button JS is pressed - it is correct? 

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


     } else < script type = "text/javascript" 
     src = "file2.js" > 
</script> 
} 
</script> 

no funciona. Di dos botones, si se presiona el primero, debe cargarse file1.js. En caso de que se presione el segundo, se debe cargar file2.js.

¿Cómo puedo hacer eso?

Answer 1

No se puede incrustar en HTML Javascript en esa forma. Básicamente, lo que desea es incrustar un elemento de script, apuntando a un determinado archivo javascript al hacer clic en un botón. Eso se puede hacer con la combinación de eventos con DOM:

<script type="application/javascript"> 
function loadJS(file) { 
    // DOM: Create the script element 
    var jsElm = document.createElement("script"); 
    // set the type attribute 
    jsElm.type = "application/javascript"; 
    // make the script element load file 
    jsElm.src = file; 
    // finally insert the element to the body element in order to load the script 
    document.body.appendChild(jsElm); 
} 
</script> 
<button onclick="loadJS('file1.js');">Load file1.js</button> 
<button onclick="loadJS('file2.js');">Load file2.js</button> 

Answer 2

Prueba esto en el tamaño: Dynamically Load JS

function loadjscssfile(filename){ 
    var fileref=document.createElement('script') 
    fileref.setAttribute("type","text/javascript") 
    fileref.setAttribute("src", filename) 
if (typeof fileref!="undefined") 
    document.getElementsByTagName("head")[0].appendChild(fileref) 
} 

loadjscssfile("myscript.js") //dynamically load and add this .js file 

Answer 3

JavaScript:

function loadScript(url) 
{ 
    document.body.appendChild(document.createElement("script")).src = url; 
} 
function loadDefaultScript() 
{ 
    loadScript("http://mysite.com/file1.js"); 
} 
function loadAlternateScript() 
{ 
    loadScript("http://mysite.com/file2.js"); 
} 

HTML:

<input type="button" onclick="loadAlternateScript()" value="Alternate" /> 
<input type="button" onclick="loadDefaultScript()" value="Default" /> 

Answer 4

Se puede usar esta función de esto funcionará perfectamente

function loadjscssfile(filename, filetype){ 
if (filetype=="js"){ //if filename is a external JavaScript file 
    var fileref=document.createElement('script') 
    fileref.setAttribute("type","text/javascript") 
    fileref.setAttribute("src", filename) 
} 
else if (filetype=="css"){ //if filename is an external CSS file 
    var fileref=document.createElement("link") 
    fileref.setAttribute("rel", "stylesheet") 
    fileref.setAttribute("type", "text/css") 
    fileref.setAttribute("href", filename) 
} 
if (typeof fileref!="undefined") 
    document.getElementsByTagName("head")[0].appendChild(fileref) 
} 

loadjscssfile("myscript.js", "js") //dynamically load and add this .js file 
loadjscssfile("javascript.php", "js") //dynamically load "javascript.php" as a JavaScript file 
loadjscssfile("mystyle.css", "css") ////dynamically load and add this .css file 

Answer 5

Via Jquery:

var getJSfile = function(src) { 
      var jsfile = $("<script type='text/javascript' src='"+src+"'>"); 
      $("head").append(jsfile); 
     }; 

    getJSfile ("home.js");