property - title javascript

Esperando un script cargado dinámicamente

Question

En el cuerpo de mi página, necesito insertar este código como resultado de una llamada AJAX:

    <p>Loading jQuery</p>
    <script type=''text/javascript'' src=''scripts/jquery/core/jquery-1.4.4.js''></script>
    <p>Using jQuery</p>
    <script type=''text/javascript''>
        $.ajax({
            ...
        });
    </script>

No puedo usar $.load() ya que el documento ya se ha cargado, por lo que el evento no se dispara.

¿Es esto seguro? De lo contrario, ¿cómo me aseguro de que el script jquery se haya cargado antes de que se ejecute el código generado y personalizado?

Answer 1

$ .ajax y $ .load son la misma cosa. Puedes usar cualquiera de los dos. Si coloca $ .load en una etiqueta de script en la página, se activará cuando se cargue como $ .ajax ().

Cuando se trata de esperar a que se active un script antes de hacer algo, Tomalak dice que es cierto. La excepción son las llamadas asíncronas. Javascript realizará una llamada AJAX, luego continuará ejecutando el script y cuando la llamada AJAX responda, ejecutará el éxito / falla según lo que le digas que haga.

Ahora diga que desea que su JS espere la devolución, con una sola llamada es bastante fácil, simplemente envuelva cada cosa en la devolución de llamada exitosa, o podría hacerlo de la mejor manera y usar $. Diferido. Esto le permite hacer un montón de llamadas ajax o una y luego ejecutar algún código solo después de finalizar.

$ .cuando & $ .en lo mejor son los mejores para esta situación.

De cualquier manera lo que estás haciendo es seguro.

Answer 2

Agregue una identificación a su archivo de script para que pueda consultarla.

<script id="hljs" async src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.0.0/highlight.min.js"></script>

Luego agregue un escucha de carga a él en JavaScript

<script>
  var script = document.querySelector(''#hljs'');
  script.addEventListener(''load'', function() {
    hljs.initHighlightingOnLoad(); 
  });
</script>

Answer 3

Es bastante seguro. Históricamente, las etiquetas <script> están bloqueadas por completo, por lo tanto, la segunda etiqueta <script> no se puede encontrar antes de que la anterior haya terminado de analizar / extraer. El único problema podría ser que los navegadores "modernos" tienden a cargar los scripts de forma asíncrona y diferida. Así que para asegurarte de que el orden sea correcto, úsalo así:

<p>Loading jQuery</p>
<script type=''text/javascript'' async=false defer=false src=''scripts/jquery/core/jquery-1.4.4.js''></script>
<p>Using jQuery</p>
<script type=''text/javascript''>
    $.ajax({
        ...
    });
</script>

Sin embargo, es probable que sea una mejor idea que use la inserción dinámica de etiquetas de script en lugar de insertar esto como una cadena HTML en el DOM. Seria la misma historia

var scr  = document.createElement(''script''),
    head = document.head || document.getElementsByTagName(''head'')[0];
    scr.src = ''scripts/jquery/core/jquery-1.4.4.js'';
    scr.async = false; // optionally

head.insertBefore(scr, head.firstChild);

Answer 4

También hay una nueva característica en jQuery 1.6 . Se llama jQuery.holdReady() . En realidad es autoexplicativo; cuando llama a jQuery.holdReady(true) , el evento ready no se jQuery.holdReady(false) hasta que llame a jQuery.holdReady(false) . Establecer esto en falso no activará automáticamente un evento listo, simplemente elimina la retención.

Aquí hay un ejemplo no bloqueante de cargar un script tomado de la documentación:

$.holdReady(true);
$.getScript("myplugin.js", function() {
     $.holdReady(false);
});

Consulte http://api.jquery.com/jQuery.holdReady/ para obtener más información