Al mirar la salida de console.log(document) , encuentro que el document tiene estas propiedades: onload=null;onloadstart=null;onloadend=null;onreadystatechange=null; Escribo el siguiente código:
<html> <head><title>test</title></head> <body> <script> document.onload=function(){alert("document.onload");}; document.onloadstart=function(){alert("document.onloadstart");}; document.onloadend=function(){alert("document.onloadend");}; document.onreadystatechange=function(){alert("document.onreadystatechange");}; </script> <div>hello</div> </body> </html> Curiosamente, document.onload,document.onloadstart,document.onloadend nunca se llaman, mientras que document.onreadystatechange se llama dos veces, ¿por qué?
¿Por qué no se llama document.onload?
En primer lugar, los eventos de load (creados por el navegador) no burbujean (porque así es como se especifica):
document.body.onload = function(e) { console.dir(e.bubbles) } Por lo tanto, solo puede escuchar estos eventos de load , en el elemento para el que ocurren.
Y para Documento , no hay ningún evento de load en la lista que se active en función del estándar.
readystatechange , por otro lado, aparece como un evento que puede ocurrir para el document .
Sin embargo, puede estar seguro de escuchar los eventos de load en el document y se llamará a la devolución de llamada del evento. Pero eso solo sucederá si, por ejemplo, activa manualmente uno en el document :
const event = new Event('load'); document.onload = function (e) { console.log('load document') } document.dispatchEvent(event); O si emite un evento de load que burbujea en un descendiente:
const event = new Event('load', {bubbles: true}); document.onload = function (e) { console.log('load document') } document.body.dispatchEvent(event); Entonces, ¿por qué onload aparece como una propiedad? Eso se debe a GlobalEventHandlers y Document includes GlobalEventHandlers ), y debido al atributo IDL del controlador de eventos , exponiéndolos como on… propiedades de eventos.
.onload es parte del objeto de la window , no para el document . GlobalEventHandlers.onload
La propiedad onload del mixin GlobalEventHandlers es un controlador de eventos que procesa eventos de
loaden elementosWindow,XMLHttpRequest,<iframe>e<img>, etc.
Y por lo que he visto en MDN .onloadstart y .onloadend se usan para recursos como imágenes, no sé si están disponibles para document / window . GlobalEventHandlers.onloadstart
Pero creo que con onreadystatechange deberías poder emular el comportamiento de onloadstart y onloadend .
Documento.readyState
No estoy seguro, pero prueba esto:
window.addEventListener('load', () => { alert("document.onload") }) Solo uso el evento de carga de la ventana, pero si nunca vi el evento de carga del documento, simplemente cambie la window al document .
Como dije, no estoy seguro de qué hacer, porque la cantidad de su código, que mostró, es menor.