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

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

Tengo un script que se ejecuta si se me activa en el <body>, como este:

function codeAddress() {
  //code
}
<body onLoad="codeAddress()">

Pero quiero correr sin el <body onload="codeAddress()"> y he probado un montón de cosas, por ejemplo este:

window.onload = codeAddress;

Pero no es trabajo.

Así que ¿cómo se ejecuta cuando se carga la página?

  • Estás ejecutando window.onload = codeAddress después de codeAddress() se define? Si es así, esto debería funcionar. Está usted seguro de que no hay un error en otro lugar?
  • Esto no tiene ningún sentido. de la ventana.onload se ejecuta después de la carga de la página y todo el javascript está disponible, por lo que el codeAddress() función puede ser declarada en cualquier lugar dentro de la página o vinculados js archivos. No tiene que venir antes a menos que así se llama durante la carga de la página en sí.
  • Sí, así es. Eche un vistazo a jsfiddle.net/HZHmc. No funciona. Pero si se mueve la ventana.onload para después de la definición: jsfiddle.net/HZHmc/1 que hace el trabajo.
  • Una declaración de la función es generalmente alzada a la parte superior del ámbito de aplicación, por lo que la función puede ser declarada en cualquier lugar accesible alcance.
  • En realidad, hmm. Si la función se declara en la etiqueta head, luego de la ventana.onload funciona bien. Sin embargo, si la función se declara más tarde (por ejemplo, en el cuerpo de la etiqueta), entonces no. Mis disculpas, a pesar de que fue parcialmente correcta. Si el codeAddress función no está declarado en la cabeza, luego de que podría ser el problema.
  • en su primera exame, no funciona porque es una expresión de función que no recibe izada. Cambiar a una declaración de la función (función func() {}) y funciona.
  • Por favor enviar su código completo. Como Darin y me han dicho (ignorar los otros), esto debe funcionar. Debe haber un error en otro lugar, si no está funcionando.
  • Sí, estoy consciente de eso, yo era sólo para probar el punto de que «de la ventana.onload se ejecuta después de la carga de la página y todo el javascript está disponible, por lo que el codeAddress() función puede ser declarada en cualquier lugar dentro de la página o vinculados js archivos.» no es cierto.
  • Ver mi segunda nota. He probado a poner la ventana.onload en una etiqueta de secuencia de comandos en la etiqueta head, y la colocó antes de la función es llamada. Funcionó bien. No fue hasta que lo puse más abajo en el cuerpo que he notado que no funciona. Me fue mal en esa nota, pero yo todavía no creo que la respuesta de arriba es completamente derecho.
  • todos los navegadores populares puede mostrar errores de javascript – ¿le?

9 Kommentare

  1. 340

    window.onload = codeAddress; debe trabajar – aquí un demo, y el código completo:

    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');
            }
            window.onload = codeAddress;
            </script>
        </head>
        <body>
        
        </body>
    </html>


    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>

    • Como he dicho en mi respuesta, no hay nada malo con el código como se ha visto – la razón por la que no trabaja debe ser un error en el JS en algún lugar.
    • si pones un párrafo con el texto en el cuerpo, no se cargará hasta que haga clic en aceptar.
    • Este controlador de eventos global sólo está disponible en Chrome. developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/…
  2. 158

    Lugar de usar jQuery o ventana.onload, nativos de JavaScript ha adoptado algunas grandes funciones desde el lanzamiento de jQuery. Todos los navegadores modernos tienen ahora su propio DOM listo función sin el uso de una librería de jQuery.

    Me gustaría recomendar este si utiliza nativos de Javascript.

    document.addEventListener('DOMContentLoaded', function() {
        alert("Ready!");
    }, false);
    • (noob la pregunta: ¿qué hace el false hacer?)
    • para las ‘burbujas’ de la propiedad (que usted no tiene que incluir, acabo de rellenar todos los booleanos para el buen hábito). También hay otra expresión booleana para ‘cancelar’ de la propiedad, pero no es muy útil, ya que la declaración anterior es ya de la onu-cancelable. Leer más sobre esto aquí: developer.mozilla.org/en-US/docs/Web/Events/DOMContentLoaded
    • Esto es lo que estaba buscando ahora mismo 🙂 se Ejecuta cuando el DOM está completo, así que se puede manipular, no cuando el navegador dice «la página se haya cargado completamente», lo cual puede tomar varios segundos, basado en cosas externas (tales como anuncios)
    • Ligeramente noob la pregunta, ¿qué pasa si usted no sabe si la página se carga o no? Edit: Ah: documento.readyState
    • DOMContentLoaded evento es disparado cuando el documento se ha cargado completamente y se analiza, sin esperar a que las hojas de estilo, imágenes, y subtramas para finalizar la carga (la carga evento puede ser utilizado para detectar totalmente cargado la página).» – stackoverflow.com/questions/2414750/…
    • Eso no responde a mi pregunta. Es sólo una cuestión de lo que usted necesita.
    • ah, entiendo, ahora la pregunta…la respuesta es, no hay nada malo con window.onload
    • window.onload puede establecer solamente una vez. Si desea ejecutar dos funciones a la carga con window.onload, el segundo será sobrescribir la primera.

  3. 44

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

    ejecutando el violín

    $(document).ready ( function(){
       alert('ok');
    });​
    • Su respuesta me enseñó varios, pero no se trata de jQuery / javascript.
    • este es el uso de jQuery, no nativos de Javascript por lo que necesita una biblioteca de jQuery incluido para que funcione
  4. 23

    Solución alternativa. Me quedo con esta por la brevedad y el código de la simplicidad.

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

    Esta es una función anónima, donde el nombre no se especifica.
    Lo que sucede aquí es que, la función está definida y ejecutada en conjunto.
    Agregar esto al principio o al final del cuerpo, dependiendo de si es para ser ejecutado antes de que la carga de la página o pronto después de que todos los elementos HTML de la carga.

    • Este es el único código que funciona con vista previa HTML para GitHub: htmlpreview.github.io Otro código, mientras correcta, es arruinado por esta vista previa HTML.
    • Puede alguien explicar cómo esto es diferente que poner las etiquetas de script al final de la página HTML y el propósito de la función anónima?
  5. 10

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

    Esto probablemente va a trabajar, sino que también va a romper en cualquier otras funciones ya que se enganche a ese evento. O, si otra función ganchos en ese evento después de la suya, se va a romper la suya.
    Así, usted puede pasar un montón de horas más tarde, tratando de averiguar por qué algo que estaba trabajando no más.

    De una forma más robusta respuesta 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, no recuerdo donde la encontré a dar el 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 esta ayuda 🙂

    • gracias por proporcionar información adicional en la onload uso
  6. 4

    Echar un vistazo a la domReady script que permite la creación de múltiples funciones a ejecutar cuando el DOM se ha cargado. Es básicamente lo que la preparación de Dom en muchas bibliotecas populares de JavaScript, pero es ligero y puede ser tomado y añade al principio de tu archivo de script externo.

    Ejemplo de uso de

    //add reference to domReady script or place 
    //contents of script before here
    
    function codeAddress() {
    
    }
    
    domReady(codeAddress);
  7. 1

    Intentar readystatechange

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

    donde los estados son:

    • carga – el documento se carga (no dispararon en el fragmento)
    • interactivo – el documento que se analiza, se despidió antes de DOMContentLoaded
    • completa – el documento y recursos que se cargan, disparó antes de window.onload

    HTML:

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

  8. 0

    ventana.onload funcionará como este:

    JS:

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

    HTML:

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

  9. -2

    Si desea ejecutar una función cuando el cuerpo se carga. En lugar de dar un atributo onload de la etiqueta body, usted puede hacer esto.

    JS:

    //define the body
    var body = document.getElementsByTagName("body")[0];
        //or
        //var body = document.querySelector("body");
        //or 
        //var body = document.querySelectorAll("body")[0];
        
        
          function codeAddress() {
          //your function
            alert("Hello World");
        }
        
        body.onload = function() {
           codeAddress();
        };

    HTML:

    <!DOCTYPE html>
    <html>
    <head>
    	<title>learning java script</title> 
    </head>
    <body>
    	<h1>Sample Heading</h1>
      <p>Sample text</p>
    </body>
    </html>

    • Esto no funciona si el script se pone antes que el cuerpo.

Kommentieren Sie den Artikel

Bitte geben Sie Ihren Kommentar ein!
Bitte geben Sie hier Ihren Namen ein

Pruebas en línea