Ejecute el código JavaScript después de que se cargue la página web
-
Agregue la etiqueta
scriptal final de la etiquetabodyen JavaScript -
Uso del evento
onloaden JavaScript -
Utilice el evento
onloaden la etiquetabodyen JavaScript -
Utilice el evento
onloaden el objetowindowdentro de un archivo JavaScript
Antes de ejecutar cualquier código JavaScript, siempre debemos asegurarnos de que todos los elementos HTML se muestren primero en el navegador. Dado que nos referiremos a estos elementos HTML dentro de nuestro código JavaScript, esos elementos deben cargarse antes de la página web.
Escribir la etiqueta script dentro de la etiqueta head no es una buena idea (esto solo tiene sentido cuando está cargando scripts de terceros en su código) porque el documento HTML se ejecuta de arriba a abajo y la etiqueta head es presente antes de la etiqueta body. Entonces, se ejecutará primero y luego la etiqueta body.
Dado que todos los contenidos de nuestra página web están presentes dentro de la etiqueta body y la etiqueta body está presente después de la etiqueta head, no es necesario agregar el código JavaScript dentro de head ya que no podrá encontrar los elementos HTML. Tenga en cuenta que hasta este momento, los elementos aún no se han creado.
Hay varias formas de cargar JavaScript después de que todos los contenidos de la página web se hayan representado completamente en la pantalla. A continuación, se muestran algunas formas conocidas que puede seguir para ejecutar el código JavaScript después de que la página web esté completamente cargada.
Agregue la etiqueta script al final de la etiqueta body en JavaScript
Agregar una etiqueta script al final de la etiqueta body es un método común para cargar el código JavaScript. Hasta este punto, todos los contenidos de la página web se muestran correctamente en la pantalla. Por lo tanto, podemos encontrar fácilmente o hacer referencia a estos elementos HTML dentro de nuestro código JavaScript sin enfrentar ningún error en el proceso.
El siguiente programa a continuación muestra cómo se hace.
<body>
<script></script>
</body>
Uso del evento onload en JavaScript
Otra forma de ejecutar JavaScript después de que se cargue la página es mediante el método onload. El método onload espera hasta que se cargue la página. Tan pronto como lo hace, este proceso ejecuta el código JavaScript.
Hay dos formas de escribir un código JavaScript. Una forma es escribir el código JavaScript dentro de la etiqueta script debajo de la etiqueta body y luego llamar a la función dentro del método onload. También puede crear un archivo separado para escribir el código JavaScript, vincular ese archivo dentro de su HTML al final de la etiqueta body y luego llamar a esa función dentro del método onload.
Utilice el evento onload en la etiqueta body en JavaScript
El método onload requiere una variable target. En este caso, usaremos el método onload en la etiqueta body para que sea el target.
Dentro del método onload, solo tenemos que pasar una función. Ahora, esta función solo se ejecutará después de que todos los contenidos de la página web estén completamente cargados.
<body onload="myFunction()">
<h1>This is an example of onload.</h1>
<script>
function myFunction() {
console.log("function called...");
}
</script>
</body>
Producción :
function called...
En la etiqueta body, solo tenemos una etiqueta h1 y una etiqueta script. En la etiqueta script, tenemos una función myFunction() que imprime un mensaje en la ventana de consola function called.... Para ejecutar esta función después de que se cargue la página, solo tenemos que pasarla dentro del método onload.
Utilice el evento onload en el objeto window dentro de un archivo JavaScript
Otra forma de utilizar el método onload es en el objeto window. El objeto de ventana representa toda la ventana del navegador. Una vez que los elementos dentro de la ventana del navegador se hayan ejecutado por completo, podemos ejecutar nuestro código JavaScript utilizando el método onload.
<body>
<h1>This is an example of onload.</h1>
<script>
window.onload = function () {
console.log("function called...");
}
</script>
</body>
Aquí tenemos el mismo código que el anterior. La única diferencia aquí es que estamos usando el método onload en el objeto window, que ahora es el objetivo. El programa eventualmente llamará a la función y el mensaje function called... se imprimirá en la ventana de la consola.
Sahil is a full-stack developer who loves to build software. He likes to share his knowledge by writing technical articles and helping clients by working with them as freelance software engineer and technical writer on Upwork.
LinkedIn