¿Cómo llamo a una función de JavaScript al cargar la página?

244

Tradicionalmente, para llamar a una función de JavaScript una vez que la página se ha cargado, agregaría un onloadatributo al cuerpo que contiene un poco de JavaScript (generalmente solo se llama a una función)

<body onload="foo()">

Cuando la página se ha cargado, quiero ejecutar un código JavaScript para llenar dinámicamente partes de la página con datos del servidor. No puedo usar el onloadatributo ya que estoy usando fragmentos JSP, que no tienen ningún bodyelemento al que pueda agregar un atributo.

¿Hay alguna otra forma de llamar a una función de JavaScript en carga? Prefiero no usar jQuery ya que no estoy muy familiarizado con él.

javascript onload

— palAlaa
fuente

15

por cierto: es Javascript; Java es un lenguaje y Javascript otro. No existe el script Java. FYI

— Yanick Rochon

¿Puede verificar que la edición de Kevin a su pregunta sigue haciendo la misma pregunta o reformularla para asegurarse de que entendemos? (¿Estás tratando de encontrar una alternativa a la carga?)

— STW

388

Si desea que el método de carga tome parámetros, puede hacer algo similar a esto:

window.onload = function() {
  yourFunction(param1, param2);
};

Esto vincula la carga a una función anónima, que cuando se invoca, ejecutará la función deseada, con los parámetros que le asigne. Y, por supuesto, puede ejecutar más de una función desde dentro de la función anónima.

— Matt Sieker
fuente

Y ahora, cuando incluyo dinámicamente una página generada por el servidor y necesito la preparación del DOM, necesito trabajar en este campo minado. Si tan solo alguien hubiera alentado correctamente al usuario de la biblioteca antes.

— Stefan Kendall

44

No dije que fuera una buena idea. Aunque el desarrollador principal donde trabajo tiene un fuerte caso de síndrome de No inventado aquí, y no he podido convencerlo de que use jquery, fuera de unas pocas páginas.

— Matt Sieker

2

Entonces quizás deberías cambiar de trabajo. Si la herramienta adecuada para el trabajo no es la herramienta que está utilizando, ¿por qué golpearse la cabeza contra la pared constantemente luchando contra los incompetentes?

— Stefan Kendall

¿Y puedo llamar a la misma función por segunda vez usando el evento onclick en el botón?

— Faizan

73

Otra forma de hacer esto es mediante el uso de escuchas de eventos, así es como los usa:

document.addEventListener("DOMContentLoaded", function() {
  you_function(...);
});

Explicación:

DOMContentLoaded Significa que cuando los objetos DOM del documento están completamente cargados y vistos por JavaScript, también podría haber sido "hacer clic", "enfocar" ...

función () Función anónima, se invocará cuando ocurra el evento.

— Ahmed Jolani
fuente

55

Tenga en cuenta que esto no funcionará en IE 8 y versiones inferiores. De lo contrario, esta es la mejor solución JS pura.

— Philipp

46

Su pregunta original no estaba clara, suponiendo que la edición / interpretación de Kevin sea correcta, entonces esta primera opción no se aplica

Las opciones típicas es usar el onloadevento:

<body onload="javascript:SomeFunction()">
....

También puede colocar su javascript al final del cuerpo; no comenzará a ejecutarse hasta que se complete el documento.

<body>
  ...
  <script type="text/javascript">
    SomeFunction();
  </script>
</body>

Y, otra opción, es considerar usar un marco JS que intrínsecamente hace esto:

// jQuery
$(document).ready( function () {
  SomeFunction();
});

— STW
fuente

El javascript:en el onloades innecesario, aunque no perjudicial.

— icktoofay

@STW <script type="text/javascript">LoadResult();</script>daUncaught ReferenceError: LoadResult is not defined

— Gunasegar

37

function yourfunction() { /* do stuff on page load */ }

window.onload = yourfunction;

O con jQuery si quieres:

$(function(){
   yourfunction();
});

Si desea llamar a más de una función en la carga de la página, consulte este artículo para obtener más información:

Uso de múltiples funciones de carga de JavaScript

— Sarfraz
fuente

3

Esto no es correcto, la función se ejecutará y asignará lo que sea que vuelva a cargar. El () no debería estar allí.

— epascarello

1

Si hay otras funciones que están escuchando el evento de carga, esto las dejará sin aliento. Es mejor agregar un detector de eventos en lugar de asignar un controlador de eventos directamente. Incluso en este caso, lo asignaría como `window.onload = yourfunction 'sin el cierre de la función, no como lo tiene. Your way busca ejecutar yourfunction () en el momento de la asignación.

— Robusto

eso asignará el valor de retorno de la función a window.onload, que no funcionará, a menos que el valor de retorno sea una función.

— I.devries

@epascarello: Buena captura, corregida, ves un hábito al escribir nombres de funciones. Gracias

— Sarfraz

1

window.onload = yourfunction; ¡El problema de esta manera es que no acepta el parámetro de función!

— palAlaa

8

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

— anónimo
fuente

3

Creo que su respuesta es clara, ya que puede ver que el script se coloca en la etiqueta de la cabeza, lo que permite que se ejecute antes del contenido del cuerpo ... o digamos precargar sus funciones o lo que sea ... a veces una persona hace preguntas porque no No lo sé en absoluto, pero nunca es el caso en el que alguien lo alimentaría con cuchara, ni nadie en esta comunidad lo haría, usted tiene que buscar las cosas usted mismo un poco más. # especially_that_you're_a_web_developer

— M03

8

Debe llamar a la función que desea que se llame en carga (es decir, carga del documento / página). Por ejemplo, la función que desea cargar cuando se carga el documento o la página se llama "yourFunction". Esto se puede hacer llamando a la función en el evento de carga del documento. Consulte el código a continuación para obtener más detalles.

Prueba el siguiente código:

<script src="js/jquery-1.11.0.min.js" type="text/javascript"></script>
<script type="text/javascript">

    $(document).ready(function () {
        yourFunction();
    });
    function yourFunction(){
      //some code
    }
</script>

— Amir Md Amiruzzaman
fuente

6

Aquí está el truco (funciona en todas partes):

r(function(){
alert('DOM Ready!');
});
function r(f){/in/.test(document.readyState)?setTimeout('r('+f+')',9):f()}

— Abhishek
fuente

1

Para detectar html cargado (desde el servidor) insertado en el uso DOM MutationObservero detectar el momento en su función loadContent cuando los datos están listos para usar

Mostrar fragmento de código

let ignoreFirstChange = 0;
let observer = (new MutationObserver((m, ob)=>
{
  if(ignoreFirstChange++ > 0) console.log('Element added on', new Date());
}
)).observe(content, {childList: true, subtree:true });


// TEST: simulate element loading
let tmp=1;
function loadContent(name) {  
  setTimeout(()=>{
    console.log(`Element ${name} loaded`)
    content.innerHTML += `<div>My name is ${name}</div>`; 
  },1500*tmp++)
}; 

loadContent('Senna');
loadContent('Anna');
loadContent('John');

<div id="content"><div>

Expandir fragmento

— Kamil Kiełczewski
fuente