2011-01-30 18 views
153

Quiero ejecutar una función cuando la página está cargada, pero no quiero usarla en la etiqueta del cuerpo.ejecutar la función cuando se carga la página

Tengo un script que se ejecuta si su inicialización en el cuerpo -como esto:

function codeAddress() { 
code..... 
} 

<body onLoad="codeAddress()"> 

Pero quiero ejecutarlo sin el cuerpo onLoad="codeAddress()" y he tryed un montón de cosas, por ejemplo, esto:

window.onload = codeAddress; 

pero no está funcionando?

Entonces, ¿cómo lo ejecuto cuando la página está cargada?

+0

por favor, puesto que su código completo. Como Darin y yo hemos dicho (ignorar a los demás), esto debería funcionar. Debe haber un error en otro lugar si no está funcionando. – Skilldrick

+3

todos los navegadores populares pueden mostrar errores de JavaScript. ¿Obtiene alguno? – Christoph

+0

¿Está ejecutando 'window.onload = codeAddress' después de definir' codeAddress() '? Si es así, esto debería funcionar. ¿Estás seguro de que no hay un error en otro lugar? – Skilldrick

Respuesta

253

window.onload = codeAddress; debería funcionar - here's a demo, 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>


<!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>

+2

Como dije en mi respuesta, no hay nada de malo en el código como se ve, la razón por la que no funciona debe ser un error en el JS en algún lugar. – Skilldrick

+0

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

+0

Este controlador de eventos global solo está disponible en Chrome. https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onload – Devappended

9
window.onload = function(){codeAddress();}; 
+10

Esto es el equivalente de 'window.onload = codeAddress' a todos los efectos. Si eso no funciona, no hay ninguna razón para hacerlo. – Skilldrick

+0

Ok. ¿Cual es tu punto? –

+9

Mi punto es que es una pérdida de tiempo. ¿Por qué agregar 15 caracteres que no hacen nada? – Skilldrick

3

Eche un vistazo a domReady script que permite la configuración de múltiples funciones para ejecutar cuando el DOM se ha cargado. Básicamente, es lo que Dom Ready hace en muchas bibliotecas populares de JavaScript, pero es liviano y puede tomarse y agregarse 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); 
31

Tomando la respuesta de Darin pero el estilo jQuery. (Sé que el usuario pidió javascript).

running fiddle

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

Su respuesta me ha enseñado asignar, pero no sobre jQuery/javascript. – unicorn2

+0

hola Eat at Joes, no funciona –

+0

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

86

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

Lo recomendaría si utiliza Javascript nativo.

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

(pregunta noob: ¿qué hace el 'falso'?) –

+4

@ ᔕᖺᘎᕊ para el ' propiedad de las burbujas (que no tiene que incluir, simplemente llene todos los booleanos para un 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 es cancelable. Obtenga más información al respecto aquí: https://developer.mozilla.org/en-US/docs/Web/Events/DOMContentLoaded –

+0

Gracias, ya he hecho +1 en usted :) –

1

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 bien, si otra función se engancha a ese evento después del tuyo, romperá el tuyo. Entonces, puede pasar muchas horas más tarde tratando de descubrir por qué algo que ya funcionaba ya no funciona.

Una respuesta más robusta here:

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; 
    } 
} 

Parte del código que he estado usando, no recuerdo donde lo encontré a dar 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 :)

Cuestiones relacionadas