jquery - JavaScript console.log provoca un error: "XMLHttpRequest síncrono en el hilo principal está en desuso..."
debugging firefox (20)
- En Chrome,
press F12 - Herramientas de desarrollo-> pulsar
F1. - Ver configuración-> general-> Apariencia:
"Don''t show chrome Data Saver warning": active esta casilla de verificación. - Ver configuración-> general-> Consola:
"Log XMLHTTPRequest"- establezca esta casilla de verificación también.
Disfrutar
He estado agregando registros a la consola para verificar el estado de diferentes variables sin usar el depurador de Firefox.
Sin embargo, en muchos lugares en los que agrego una console.log en mi archivo main.js , recibo el siguiente error en lugar de mis pequeños mensajes escritos a mano:
El XMLHttpRequest síncrono en el hilo principal está en desuso debido a sus efectos perjudiciales para la experiencia del usuario final. Para más ayuda http://xhr.spec.whatwg.org/
¿Qué alternativas o envoltorios para console.log puedo agregar al uso de mi código que no causará este error?
¿Estoy "haciendo mal"?
A veces es necesario cargar un script ajax pero retrasar el documento hasta que se cargue el script.
jQuery admite esto con la función holdReady() .
Ejemplo de uso:
$.holdReady(true); //set hold
function releaseHold() { $.holdReady(false); } //callback to release hold
$.getScript(''script.js'', releaseHold); //load script then release hold
La carga de script real es asíncrona ( sin error ), pero el efecto es sincrónico si el resto de su JavaScript se ejecuta después de que el documento esté listo .
Esta característica avanzada normalmente la usarían los cargadores de scripts dinámicos que desean cargar JavaScript adicional, como los complementos de jQuery, antes de permitir que ocurra el evento Ready, aunque el DOM esté listo.
Documentación:
https://api.jquery.com/jquery.holdready
Al igual que @Nycen, también recibí este error debido a un enlace a Cloudfare. El mío fue para el plugin Select2 .
para arreglarlo acabo de quitar
src="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/js/select2.min.js"
y el error se fue.
El depurador en vivo de Visual Studio 2015/2017 está inyectando un código que contiene la llamada en desuso.
El mensaje de advertencia PUEDE SER debido a una solicitud XMLHttpRequest dentro del hilo principal con el indicador asíncrono establecido en falso.
https://xhr.spec.whatwg.org/#synchronous-flag :
El XMLHttpRequest sincrónico fuera de los trabajadores está en proceso de ser eliminado de la plataforma web, ya que tiene efectos perjudiciales para la experiencia del usuario final. (Este es un proceso largo que lleva muchos años). Los desarrolladores no deben pasar falso para el argumento asíncrono cuando el entorno global de JavaScript es un entorno de documento. Se recomienda encarecidamente a los agentes de usuario que adviertan sobre este uso en las herramientas del desarrollador y pueden experimentar con lanzar una excepción InvalidAccessError cuando ocurra.
La dirección futura es permitir solo XMLHttpRequests en subprocesos de trabajo. El mensaje pretende ser una advertencia a tal efecto.
En mi caso particular, estaba renderizando un Rails parcial sin render layout: false que estaba representando de nuevo todo el diseño, incluidos todos los scripts en la etiqueta <head> . Agregar render layout: false a la acción del controlador solucionó el problema.
En mi caso, esto fue causado por el script flexie que era parte de la aplicación "Selecciones de CDNJS" ofrecida por Cloudflare .
Según Cloudflare, "esta aplicación está en desuso en marzo de 2015". Lo apagué y el mensaje desapareció instantáneamente.
Puede acceder a las aplicaciones visitando https://www.cloudflare.com/a/cloudflare-apps/yourdomain.com
NB: esta es una copia de mi respuesta en este hilo. Aviso síncrono de XMLHttpRequest y <script> (visité ambos al buscar una solución)
En una aplicación MVC, recibí esta advertencia porque estaba abriendo una ventana de Kendo con un método que devolvía una vista (), en lugar de una vista parcial (). La Vista () estaba intentando recuperar de nuevo todos los scripts de la página.
Esto me sucedió cuando estaba siendo perezoso e incluía una etiqueta de script como parte del contenido que se estaba devolviendo. Como tal:
Contenido HTML parcial:
<div>
SOME CONTENT HERE
</div>
<script src="/scripts/script.js"></script>
Parece, al menos en mi caso, que si devuelve contenido HTML como ese a través de xhr, hará que jQuery haga una llamada para obtener ese script. Esa llamada ocurre con un indicador de async falso, ya que asume que necesita la secuencia de comandos para continuar la carga.
En situaciones como esta, sería mejor utilizar un marco de enlace de algún tipo y simplemente devolver un objeto JSON, o dependiendo de su back-end y plantilla, podría cambiar la forma en que carga sus scripts.
También puede usar getScript() jQuery para capturar los scripts relevantes. Aquí hay un violín. Es solo una copia directa del ejemplo de jQuery, pero no veo ninguna advertencia cuando se cargan los scripts de esa manera.
Ejemplo
<script>
var url = "/scripts/script.js";
$.getScript(url);
</script>
Esto se resuelve en mi caso.
JS
$.ajaxPrefilter(function( options, original_Options, jqXHR ) {
options.async = true;
});
Esta respuesta fue insertada en este enlace.
https://.com/questions/28322636/synchronous-xmlhttprequest-warning-and-script
He arreglado esto con los siguientes pasos:
- Revise sus scripts CDN y agréguelos localmente.
- Mueve tus scripts incluidos en la sección del encabezado
He estado mirando las respuestas impresionantes. Creo que debería proporcionar el código que le está dando un problema. Teniendo en cuenta el siguiente ejemplo, si tiene un script para enlazar con jquery en page.php, recibirá ese aviso.
$().ready(function () {
$.ajax({url: "page.php",
type: ''GET'',
success: function (result) {
$("#page").html(result);
}});
});
La respuesta parcial de @Webgr en realidad me ayudó a depurar este aviso @ el registro de la consola, avergonzó la otra parte de esa respuesta trajo tantos votos negativos :(
De todos modos, aquí es cómo descubrí cuál fue la causa de esta advertencia en mi caso:
- Use Chrome Browser> Hit F12 para traer DevTools
- Abra el menú del cajón (en Chrome 3 puntos verticales en la parte superior derecha)
- En Consola > marca la opción Registrar XMLHttpRequests
- Vuelva a cargar la página que le estaba dando el error y observe qué sucede en cada solicitud de ajax en el registro de la consola.
En mi caso, otro complemento estaba cargando 2 bibliotecas .js después de cada llamada ajax, que no eran absolutamente necesarias ni necesarias. Al deshabilitar el complemento malicioso se eliminó la advertencia del registro. Desde ese punto, puede intentar solucionar el problema usted mismo (por ejemplo, limitar la carga de los scripts a ciertas páginas o eventos; esto es demasiado específico para una respuesta aquí) o ponerse en contacto con un desarrollador de complementos de terceros para resolverlo.
Espero que esto ayude a alguien.
Me estaba pasando en ZF2. Estaba intentando cargar el contenido modal, pero olvidé deshabilitar el diseño antes.
Asi que:
$viewModel = new ViewModel();
$viewModel->setTerminal(true);
return $viewModel;
Obtuve esta excepción cuando puse url en la consulta como "example.com/files/text.txt". He cambiado la URL a " http://example.com/files/text.txt " y esta excepción desapareció.
Para evitar esta advertencia, no utilice:
async: false
en cualquiera de tus $ .ajax () llamadas. Esta es la única característica de XMLHttpRequest que está en desuso.
El valor predeterminado es
async: true
Para mí, el problema era que en una solicitud OK, esperaba que la respuesta ajax fuera una cadena HTML bien formateada, como una tabla, pero en este caso, el servidor estaba experimentando un problema con la solicitud, redirigiendo a una página de error, y, por lo tanto, estaba devolviendo el código HTML de la página de error (que tenía una etiqueta de <script algún lugar. La consola registró la respuesta ajax y ahí fue cuando me di cuenta de que no era lo que esperaba y luego procedí a hacer mi depuración).
Recibo tal advertencia en el siguiente caso:
1) archivo1 que contiene <script type="text/javascript" src="/javascript/jquery-1.10.2.js"></script> . La página tiene campos de entrada. Introduzco algún valor en el campo de entrada y hago clic en el botón. Jquery envía la entrada al archivo php externo.
2) el archivo php externo también contiene jquery y en el archivo php externo también incluí <script type="text/javascript" src="/javascript/jquery-1.10.2.js"></script> . Porque si esta me sale la advertencia.
Se eliminó <script type="text/javascript" src="/javascript/jquery-1.10.2.js"></script> del archivo php externo y funciona sin la advertencia.
Según tengo entendido al cargar el primer archivo (archivo 1), cargo jquery-1.10.2.js y la página no se vuelve a cargar (envía datos a un archivo php externo usando jquery $.post ), luego jquery-1.10.2.js siguen existiendo. Así que no hace falta volver a cargarlo.
También estaba enfrentando el mismo problema, pero pude solucionarlo poniendo async: true. Sé que es verdad por defecto, pero funciona cuando lo escribo explícitamente
$.ajax({
async: true, // this will solve the problem
type: "POST",
url: "/Page/Method",
contentType: "application/json",
data: JSON.stringify({ ParameterName: paramValue }),
});
Y obtuve esta excepción por incluir un script can.js dentro de otro, por ejemplo,
{{>anotherScript}}