2011-05-16 19 views
13

Estoy haciendo pruebas de QUnit en un IFRAME y tengo una función recursiva de JavaScript que carga todos los scripts de la página principal en el IFRAME antes de iniciar QUnit. Esto funciona genial Mi problema es que algunos de nuestros scripts usan document.ready para hacer que todo comience.¿Cómo puedo retrasar la preparación del documento hasta que se establezca una variable?

Algo como:

$(document).ready(function() { 
    // blah 
}); 

hacer hacer su trabajo. Preferiría no cambiar el código de producción solo para dar cuenta de las pruebas y no quiero que estas secuencias de comandos de producción piensen que el documento IFRAME está "listo" hasta que se carguen todas las secuencias de comandos.

¿Cómo puedo retrasar "document.ready" en sí?

Aquí es mi pseudocódigo para darle un ejemplo para trabajar a partir de:

scripts[0] = "/foo/bar.js"; 
scripts[1] = "/blah/blah.js"; 

function RecursiveScriptStart(){ 
    // I want to set document.ready = false right here! 
    if(scripts.length == 0) { 
     QUnitStart(); 
     return; 
    } 
    RecursiveScriptLoader(0, scripts); 
} 

function RecursiveScriptLoader(currentScriptID, scripts) { 
    $.getScript(scripts[currentScriptID], function() { 
     if (currentScriptID == (scripts.length - 1)) { 
      QUnitStart(); 
     } 
     else { 
      RecursiveScriptLoader(currentScriptID + 1, scripts); 
     } 
    }); 
} 


function QUnitStart() { 
     // I want to set document.ready = true right here! 
     QUnit.stop(); 
     QUnit.start(); 
} 

El código real es similar, pero implica un selector de jQuery poblar la matriz "scripts[]" con propiedades de la etiqueta de JavaScript "src".

Gracias!

+0

[Este] (http://stackoverflow.com/questions/5852767/possible-to-defer-loading-of-jquery/5853028) pregunta puede ser útil. –

Respuesta

21

Si está utilizando jQuery 1.6+, puede usar holdReady. Simplemente configure $.holdReady(true) en la parte superior de su secuencia de comandos y luego al comienzo de QUnitStart establezca $.holdReady(false).

+0

sin jQuery? – htellez

+1

@htellez sin jQuery no tendría un bloque '$ (document) .ready()', por lo que para responder a esa pregunta, tendríamos que saber más detalles sobre lo que está usando. Tal vez es mejor preguntarlo como una pregunta separada que como un comentario a este. – mVChr

4

Si utiliza jQuery 1.6 o superior, puede usar holdReady para retrasar el desencadenamiento del evento listo.

Para 1.4.3 o superior que se puede usar $ .readyWait propiedad de retrasar el evento ready, Demo Here (no es mi código)

si estás interesado en encontrar la manera de jQuery se encarga de la búsqueda de eventos listo para la línea

jQuery(document).trigger("ready").unbind("ready"); 

en su copia del desarrollador jquery.js

0

sólo para llenar en donde otros dejaron, es posible utilizar este orden de carga en su test.html

<script src="jquery.js"></script> 
<script src="qunit.js"></script> 
<script>$.holdReady(true);</script> 
<script src="theThingIwantToTest.js"></script> 
<script src="theTestScript.js"></script> 
0
<html lang="en"> 
    <head> 
     <meta charset="utf-8"> 
     <script type="text/javascript"> 
      window.setInterval(function() { 
       console.log(document.getElementById('waitForMe')); 
      }, 500); 
     </script> 
    </head> 
    <body> 
     Before 
     <script type="text/javascript" src="/php-with-sleep.php"></script> 
     After 
     <div id="waitForMe"></div> 
    </body> 
</html> 

prueba extendido, he probado RequireJS domready complemento

<html lang="en"> 
    <head> 
     <meta charset="utf-8"> 
     <script type="text/javascript" src="/vendor/require/require.js"></script> 
     <script type="text/javascript"> 
      window.setInterval(function() { 
       console.log(document.getElementById('waitForMe')); 
      }, 500); 

      require.config({ 
       baseUrl: '/', 
       paths: { 
        domReady: 'vendor/require/plugin/dom-ready', 
        jQuery: 'vendor/jquery' 

       }, 
       shim: { 
        async: { 
         exports: 'async' 
        }, 
        jQuery: { 
         exports: 'jQuery' 
        } 
       } 
      }); 

      require(['domReady', 'jQuery'], function(domReady, $) { 
       console.log('jQuery loaded'); 
       $(function() { 
        console.log('jQuery dom ready'); 
       }); 

       domReady(function() { 
        console.log('domReady requireJs plugin, callback'); 
       }) 
      }); 

      require(['domReady!', 'jQuery'], function(domReady, $) { 
       console.log('domReady! (no callback)'); 
      }); 

      require(['domReady', 'jQuery'], function(domReady, $) { 
       console.log('domReady plugin loaded'); 
      }); 
     </script> 
    </head> 
    <body> 
     Before 
     <script type="text/javascript" src="/php-with-sleep.php"></script> 
     After 
     <div id="waitForMe"></div> 
    </body> 
</html> 
2

Este código funcionó para mí; Para invocar el interior $(window).load()$(document).ready()

$(document).ready(function() { 
    $(window).load(function() { 
     // this code will run after all other $(document).ready() scripts 
     // have completely finished, AND all page elements are fully loaded. 
    }); 
}); 

Este método preservaría orden de ejecución en todos los casos, asegurándose de que su gestión último código no se pasa al $(window).load() hasta que todos los guiones $(document).ready() han completado.

Cuestiones relacionadas