¿Cómo ejecutar una función cuando se carga la página?

246

Quiero ejecutar una función cuando se carga la página, pero no quiero usarla en el <body> etiqueta.

Tengo un script que se ejecuta si lo inicializo en el <body>, así:

function codeAddress() {
  // code
}

<body onLoad="codeAddress()">

Pero quiero ejecutarlo sin el <body onload="codeAddress()">y he intentado muchas cosas, por ejemplo, esto:

window.onload = codeAddress;

Pero no está funcionando.

Entonces, ¿cómo lo ejecuto cuando se carga la página?

javascript html onload

— Claes Gustavsson
fuente

¿Estás corriendo window.onload = codeAddressdespués de que codeAddress()esté definido? Si es así, esto debería funcionar. ¿Estás seguro de que no hay un error en otro lugar?

— Skilldrick

Esto no tiene ningún sentido. window.onload se ejecuta después de cargar la página y todo javascript está disponible, por lo que la función codeAddress () se puede declarar en cualquier lugar dentro de la página o archivos js vinculados. No tiene que venir antes a menos que se haya llamado durante la carga de la página.

— Jared Farrish

@ Jared Sí, lo hace. Echa un vistazo a jsfiddle.net/HZHmc . No funciona Pero si mueve window.onload a después de la definición: jsfiddle.net/HZHmc/1 funciona.

— Skilldrick

Una declaración de función generalmente se eleva a la parte superior del alcance, por lo que la función se puede declarar en cualquier lugar de un alcance accesible.

— Russ Cam

44

Todos los navegadores populares pueden mostrar errores de JavaScript. ¿Obtiene alguno?

— Christoph

354

window.onload = codeAddress;debería funcionar: aquí hay una demostración y el código completo:

<!DOCTYPE html>
<html>
    <head>
        <title>Test</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <script type="text/javascript">
        function codeAddress() {
            alert('ok');
        }
        window.onload = codeAddress;
        </script>
    </head>
    <body>
    
    </body>
</html>

Expandir fragmento

<!DOCTYPE html>
<html>
    <head>
        <title>Test</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <script type="text/javascript">
        function codeAddress() {
            alert('ok');
        }
        
        </script>
    </head>
    <body onload="codeAddress();">
    
    </body>
</html>

Expandir fragmento

— Darin Dimitrov
fuente

3

Como dije en mi respuesta, no hay nada malo con el código como se ve: la razón por la que no funciona debe ser un error en el JS en alguna parte.

— Skilldrick

Si coloca un párrafo con texto en el cuerpo, no se cargará hasta que haga clic en Aceptar.

— FluorescentGreen5

Este controlador de eventos global solo está disponible en Chrome. developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/…

— Devappended

177

En lugar de usar jQuery o window.onload, JavaScript nativo ha adoptado algunas funciones excelentes desde el lanzamiento de jQuery. Todos los navegadores modernos ahora tienen su propia función DOM lista sin el uso de una biblioteca jQuery.

Lo recomendaría si usa Javascript nativo.

document.addEventListener('DOMContentLoaded', function() {
    alert("Ready!");
}, false);

— Spencer May
fuente

44

(pregunta novata: ¿qué hace false?)

— ᔕᖺᘎᕊ

77

@ ᔕᖺᘎᕊ para la propiedad 'burbujas' (que no tiene que incluir, solo relleno todos los booleanos por buen hábito). También hay otra declaración booleana para la propiedad 'cancelable', pero no es muy útil ya que la declaración anterior ya no se puede cancelar. Lea más sobre esto aquí: developer.mozilla.org/en-US/docs/Web/Events/DOMContentLoaded

— Spencer

1

Esto es lo que estaba buscando en este momento :) Se ejecuta cuando se completa el DOM, por lo que puede manipularlo, no cuando el navegador dice "página completamente cargada", lo que puede tomar varios segundos, en función de cosas externas (como anuncios)

— Nathanyel

Ligeramente nueva pregunta, ¿qué pasa si no sabe si la página está cargada o no? Editar: Ah: document.readyState

— Brian Hannay

1

@ x-yuri "El evento DOMContentLoaded se activa cuando el documento se ha cargado y analizado por completo, sin esperar a que las hojas de estilo, las imágenes y los subtramas terminen de cargarse (el evento de carga se puede usar para detectar una página completamente cargada)". - stackoverflow.com/questions/2414750/…

— Spencer Mayo

46

Tomando la respuesta de Darin pero al estilo jQuery. (Sé que el usuario solicitó JavaScript).

violín corriendo

$(document).ready ( function(){
   alert('ok');
});

— Comer en joes
fuente

44

Su respuesta me enseñó mucho, pero no sobre jQuery / javascript.

— unicorn2

2

@VijayKumar, esto es jQuery, no Javascript nativo, por lo que necesita una biblioteca jQuery incluida para que funcione

— Spencer puede el

30

Solución alternativa Prefiero esto por la brevedad y la simplicidad del código.

(function () {
    alert("I am here");
})();

Esta es una función anónima, donde no se especifica el nombre. Lo que sucede aquí es que, la función se define y ejecuta conjuntamente. Agregue esto al principio o al final del cuerpo, dependiendo de si se ejecutará antes de cargar la página o poco después de que se carguen todos los elementos HTML.

— Habeeb
fuente

1

Este es el único código que funciona con HTML Preview para GitHub: htmlpreview.github.io. Otro código, aunque correcto, es arruinado por esta HTML Preview.

— Jason Doucette el

1

¿Alguien puede explicar cómo esto es diferente de poner las etiquetas de script al final de la página HTML y el propósito de la función anónima?

— Pat-Laugh

10

window.onload = function() { ... etc. no es una gran respuesta.

Esto probablemente funcionará, pero también interrumpirá cualquier otra función que ya esté conectada a ese evento. O, si otra función se engancha en ese evento después de la suya, romperá la suya. Entonces, puede pasar muchas horas más tarde tratando de descubrir por qué algo que ya no funcionaba.

Una respuesta más robusta aquí:

if(window.attachEvent) {
    window.attachEvent('onload', yourFunctionName);
} else {
    if(window.onload) {
        var curronload = window.onload;
        var newonload = function(evt) {
            curronload(evt);
            yourFunctionName(evt);
        };
        window.onload = newonload;
    } else {
        window.onload = yourFunctionName;
    }
}

Algún código que he estado usando, olvido dónde lo encontré para darle crédito al autor.

function my_function() {
    // whatever code I want to run after page load
}
if (window.attachEvent) {window.attachEvent('onload', my_function);}
else if (window.addEventListener) {window.addEventListener('load', my_function, false);}
else {document.addEventListener('load', my_function, false);}

Espero que esto ayude :)

— Será
fuente

gracias por proporcionar información adicional sobre el onloaduso

— CybeX

4

Prueba readystatechange

document.addEventListener('readystatechange', () => {    
  if (document.readyState == 'complete') codeAddress();
});

donde los estados son:

cargando : el documento se está cargando (sin disparar en el fragmento)
interactivo : el documento se analiza, se dispara antesDOMContentLoaded
completo : el documento y los recursos se cargan, se disparan anteswindow.onload

Mostrar fragmento de código

<script>
  document.addEventListener("DOMContentLoaded", () => {
    mydiv.innerHTML += `DOMContentLoaded (timestamp: ${Date.now()})</br>`;
  });
  
  window.onload = () => {
    mydiv.innerHTML += `window.onload (timestamp: ${Date.now()}) </br>` ;
  } ;

  document.addEventListener('readystatechange', () => {
    mydiv.innerHTML += `ReadyState: ${document.readyState}  (timestamp: ${Date.now()})</br>`;
    
    if (document.readyState == 'complete') codeAddress();
  });

  function codeAddress() {
    mydiv.style.color = 'red';
  }
</script>

<div id='mydiv'></div>

Expandir fragmento

— Kamil Kiełczewski
fuente

3

Eche un vistazo al script domReady que permite la configuración de múltiples funciones para ejecutar cuando se carga el DOM. Básicamente es lo que hace el Dom listo en muchas bibliotecas JavaScript populares, pero es liviano y se puede tomar y agregar al comienzo de su archivo de script externo.

Ejemplo de uso

// add reference to domReady script or place 
// contents of script before here

function codeAddress() {

}

domReady(codeAddress);

— Russ Cam
fuente

0

window.onload funcionará así:

function codeAddress() {
	document.getElementById("test").innerHTML=Date();
}
window.onload = codeAddress;

<!DOCTYPE html>
<html>
<head>
	<title>learning java script</title>
	<script src="custom.js"></script>
</head>
<body>
	<p id="test"></p>
	<li>abcd</li>
</body>
</html>

Expandir fragmento

— Rudra
fuente