van - cargar dependencias de JavaScript en la demanda

donde van los script en html

Question

Estoy seguro de que hay diferentes enfoques para este problema, y ​​puedo pensar en algunos. Pero me gustaría escuchar la opinión de otras personas sobre esto. Para ser más específico, he creado un widget que permite a los usuarios elegir su ubicación desde un mapa de Google Maps. Este widget se muestra bajo demanda y probablemente se utilizará cada 1 de cada 10 usos de la página donde se coloca. La forma más sencilla de cargar la dependencia para este widget (google maps js api) es colocar una etiqueta de script en la página. Pero esto haría que el navegador solicite ese script en cada carga de página. Estoy buscando una manera de hacer que el navegador solicite ese script solo cuando el usuario lo requiera para que se muestre el widget.

Answer 1

puede cargar secuencias de comandos dinámicamente agregando la etiqueta <script src="..."> al árbol DOM.

Answer 2

Es posible que desee echar un vistazo a jsloader: http://www.jsloader.com/

Answer 3

Gaia Ajax hace esto (lo sé desde que lo implementé, soy el fundador original) y ellos son GPL. Así que a menos que tengas miedo de que te demanden (ahora me están acusando de demandas legales), tal vez quieras comprobar cómo lo hacen. La tecnología básica es inyectar una etiqueta de script usando DOM cuando se necesita una secuencia de comandos. Aunque debe tener cuidado de NO hacer referencia a cosas en este archivo antes de que termine de cargarse (lo que ocurre de forma asincrónica)

La solución a ese problema (una solución) es agregar una variable en la parte inferior del archivo y usar llamadas recursivas setTimeout para verificar si la variable está definida y diferir la ejecución del código dependiendo del archivo que se termine de cargar hasta ese "fondo" del archivo JS "la variable se define ...

También realizamos un seguimiento de qué archivos se incluyeron al agregar el valor hash de los nombres de archivo en un campo oculto en la página. Esto significa que nunca terminamos incluyendo el mismo archivo más de una vez ...

Bastante ingenioso, de hecho ...

Answer 4

function loadJSInclude(scriptPath, callback)
{
    var scriptNode = document.createElement(''SCRIPT'');
    scriptNode.type = ''text/javascript'';
    scriptNode.src = scriptPath;

    var headNode = document.getElementsByTagName(''HEAD'');
    if (headNode[0] != null)
        headNode[0].appendChild(scriptNode);

    if (callback != null)    
    {
        scriptNode.onreadystagechange = callback;            
        scriptNode.onload = callback;
    }
}

Y para usar (utilicé swfObject como ejemplo):

var callbackMethod = function ()
{
    // Code to do after loading swfObject
}

// Include SWFObject if its needed
if (typeof(SWFObject) == ''undefined'')    
    loadJSInclude(''/js/swfObject.js'', callbackMethod);
else
    callbackMethod();

Answer 5

Las API de Google AJAX proporcionan carga dinámica para las API de JavaScript de Google. Hay un ejemplo de carga de Maps JS a pedido en la documentación:

function mapsLoaded() {
  var map = new google.maps.Map2(document.getElementById("map"));
  map.setCenter(new google.maps.LatLng(37.4419, -122.1419), 13);
}

function loadMaps() {
  google.load("maps", "2", {"callback" : mapsLoaded});
}

Answer 6

Es posible que desee echar un vistazo a una DEMO real en el sitio de bienes raíces.

En la página de demostración, simplemente haga clic en el enlace [Xem bản đồ] para ver el mapa cargado a pedido. El mapa se carga solo cuando se hace clic en el vínculo, no en el momento de la carga de la página, por lo que puede reducir el tiempo de descarga de la página.