tablas - obtener datos de una tabla html javascript

Formas de agregar archivos javascript dinámicamente en una página

Question

He visto el archivo Scriptaculous.js para incluir dinámicamente los archivos javascript requeridos. ¿Hay algún mejor enfoque para incluir Javascript de forma dinámica?

Por ejemplo, me gustaría incluir mis archivos js como,

<script src="single.js?files=first.js,second.js,third.js..."></script>

¿Cómo puedo hacer eso de una manera eficiente?

Answer 1

He visto lo que hace el cargador scriptaculous. Lo que hace es que pasa por todas las etiquetas de script en el documento para encontrar la que se cargó, por ejemplo:

<script src="/path/to/single.js?files=first.js,second.js,third.js"></script>

A continuación, analiza la cadena de consulta utilizada dentro del atributo src y crea dinámicamente etiquetas de script adicionales para cada archivo de script. Al mismo tiempo, también analiza la ruta del script base ( /path/to/single.js ) y utiliza la misma ruta para cargar archivos de dependencia (por ejemplo, /path/to/first.js ).

Puede crear su propio gestor de secuencia de comandos de esta manera. En vainilla javascript, puede usar las siguientes funciones:

• getElementsByTagName - encuentre todos los scripts
• getAttribute - encuentra el atributo src / href / type
• createElement : crea un elemento de script
• appendChild - añadir a la cabeza / cuerpo

Anand Thangappan ha publicado una solución que utiliza estas funciones. Si está utilizando un marco como jQuery o MooTools, ambos proporcionan sus propias implementaciones de carga dinámica de JsvaScript.

Finalmente, hay una solución del lado del servidor para su problema. Mire minify - Combina y minimiza múltiples archivos CSS o JavaScript en una sola descarga.

Answer 2

Para agregar un nuevo archivo javascript dinámicamente:

function includeJS(jsFile) {
    $(''head'').append($(''<script>'').attr(''type'', ''text/javascript'').attr(''src'', jsFile));
}


// Pick a JS to load
if ($.browser.msie) {
    includeJS(''first.js'');
} else {
    includeJS(''second.js'');
}
includeJS(''third.js'');

Answer 3

Para cargar dinámicamente un archivo .js o .css, en pocas palabras, significa usar métodos DOM para crear primero un nuevo elemento "SCRIPT" o "LINK", asignarle los atributos adecuados y, finalmente, usar element.appendChild () para agregar el elemento a la ubicación deseada dentro del árbol de documentos. Suena mucho más elegante de lo que realmente es. Veamos cómo se junta todo:

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

espero su uso completo

Answer 4

Podemos ampliar esto rápidamente para que se pueda realizar una devolución de llamada una vez que se agrega el guión.

function loadjscssfile(filename, filetype, callback){
    if (typeof fileref!="undefined") {
        document.getElementsByTagName("head")[0].appendChild(fileref);
        callback();
    }
}

Answer 5

Puedes usar la función jQuery.getScript() ... Creo que será mucho más fácil para ti incluir un archivo .js JavaScript.

Here está la referencia.

Answer 6

Siguiendo el consejo de los comentarios de Salaman A , descubrí cómo Google lo hace ahora con Analytics: https://developers.google.com/analytics/devguides/collection/gajs/asyncTracking

Y aquí hay una versión más genérica del mismo código:

(function() {
    var s = document.createElement(''script''); // Create a script element
    s.type = "text/javascript";               // optional in html5
    s.async = true;                           // asynchronous? true/false
    s.src = "//example.com/your_script.js"; 
    var fs = document.getElementsByTagName(''script'')[0];  // Get the first script
    fs.parentNode.insertBefore(s, fs);
})();

Answer 7

hay muchas formas diferentes, pero la forma en que Google carga scripts adicionales es así:

function getScript(src) {
    document.write(''<'' + ''script src="'' + src + ''"'' +
                   '' type="text/javascript"><'' + ''/script>'');
}

Esto se toma directamente del cargador de mapas de Google.

Escribir una etiqueta de script directamente en el documento es la forma más simple y eficiente.

Answer 8

document.getElementsByTagName("head")[0].appendChild(fileref‌​) no funciona si tiene algún document.ready () funciona en línea. $("head").append(fileref); funciona muy bien para mí, aunque necesita la referencia en línea jquery.min.js .

<head>
    <!-- Meta, title, CSS, favicons, etc. -->
    <script src="script/jquery.min.js"></script>
    <script src="script/master_load.js"></script>
    <script>
        load_master_css();
        load_master_js();
    </script>
</head>

y master_load.js :

function loadjscssfile(filename) {
    if (filename.substr(filename.length - 4) == ".css") { // ''endsWith'' is not IE supported.
        var fileref = document.createElement("link")
        fileref.setAttribute("rel", "stylesheet")
        fileref.setAttribute("href", filename)
        //fileref.setAttribute("type", "text/css")
    }
    else if (filename.substr(filename.length - 3) == ".js") {
        var fileref = document.createElement(''script'')
        fileref.setAttribute("src", filename)
        //fileref.setAttribute("type", "text/javascript")
    }
    $("head").append(fileref);
}
function load_master_css() {
    loadjscssfile("css/bootstrap.min.css");
    // bunch of css files
}
function load_master_js() {
    loadjscssfile("script/bootstrap.min.js");
    // bunch of js files
}