Cuando se carga una web que tiene algún javascript que requiere mucho tiempo de cálculo, los navegadores se bloquean y después de unos minutos muestran mensajes para continuar o detener el script.
Sin embargo hay algunas webs que evitan esto (no sé cómo lo harán). Pongo el ejemplo de la siguiente página para jugar al ajedrez: http://forwardcoding.com/projects/ajaxchess/chess.html (para probar, hay que poner el “Time per move:” mayor de 10000 ms).
¿Cómo se puede hacer eso?
Para probar, he hecho el siguiente javascript en el archivo bloquea.js
Código
function bloquea() { var limite = 10000000000; var n = 0; for (var i = 0; i < limite; i++) { n = i; } document.write("Terminado!"); }
Y luego, la siguiente página:
Código
Se puede probar aquí: http://bitcart.info/laboratorio/bloquea.htm
Como se puede ver se bloquea, aunque si no se interrumpe voluntariamente el script, después de unos 15 segundos termina.
He estado buscando y encontré esta página en la que creo que se explica cómo solucionar el problema: http://www.frikipandi.com/public/post/cargar-javascript-sin-bloqueo-en-el-navegador/ Pero, utilizando el archivo bloquea.js, no he conseguido hacer funcionar ninguna de las opciones que describe.
El código de la primera es éste:
Código
<html> <head> <meta charset="utf-8"> <script type="text/javascript"> var xhrObj = getXHRObject(); xhrObj.onreadystatechange = function() { if ( xhrObj.readyState == 4 && 200 == xhrObj.status ) { eval(xhrObj.responseText); } }; xhrObj.open('GET', 'bloquea.js', true); xhrObj.send(''); </script> </head> <body> <form> <input type="button" value="Bloquea" onclick="bloquea()"> </form> </body> </html>
Y se puede probar aquí: http://bitcart.info/laboratorio/nobloquea_1.htm
Bloquearse, no se bloquea, pero nunca termina, por lo que pienso que no entra en el bucle.
La segunda opción es ésta:
Código
<html> <head> <meta charset="utf-8"> <script type="text/javascript"> var xhrObj = getXHRObject(); xhrObj.onreadystatechange = function() { if ( xhrObj.readyState == 4 ) { var scriptElement = document.createElement('script'); document.getElementsByTagName('head')[0].appendChild(scriptElement); scriptElement.text = xhrObj.responseText; } }; xhrObj.open('GET', 'bloquea.js', true); xhrObj.send(''); </script> </head> <body> <form> <input type="button" value="Bloquea" onclick="bloquea()"> </form> </body> </html>
Y para probar: http://bitcart.info/laboratorio/nobloquea_2.htm
El resultado es el mismo que el de la anterior.
Tercera opción:
Código
<html> <head> <meta charset="utf-8"> <script type="text/javascript"> var scriptElement = document.createElement('script'); scriptElement.src = 'bloquea.js'; document.getElementsByTagName('head') [0].appendChild(scriptElement); </script> </head> <body> <form> <input type="button" value="Bloquea" onclick="bloquea()"> </form> </body> </html>
Y para probar: http://bitcart.info/laboratorio/nobloquea_3.htm
Sí se bloquea, y también termina.
Cuarta opción:
Código
Para probar: http://bitcart.info/laboratorio/nobloquea_4.htm
Lo mismo, se bloquea y termina.
La quinta opción ya no la he probado.
¿Alguien puede ayudarme?
Un saludo.