Come posso chiamare una funzione JavaScript al caricamento della pagina?

244

Tradizionalmente, per chiamare una funzione JavaScript una volta caricata la pagina, aggiungi un onloadattributo al corpo contenente un po 'di JavaScript (di solito chiama solo una funzione)

<body onload="foo()">

Quando la pagina è stata caricata, voglio eseguire un codice JavaScript per popolare dinamicamente parti della pagina con i dati dal server. Non posso usare l' onloadattributo poiché sto usando frammenti JSP, che non hanno alcun bodyelemento a cui posso aggiungere un attributo.

C'è un altro modo per chiamare una funzione JavaScript al caricamento? Preferirei non usare jQuery perché non ne ho molta familiarità.

javascript onload

— palAlaa
fonte

15

btw: è Javascript; Java è una lingua e Javascript un'altra. Non esiste uno script Java. Cordiali saluti

— Yanick Rochon,

Puoi verificare che la modifica di Kevin alla tua domanda stia ancora ponendo la stessa domanda o riformularla per essere sicuro che capiamo? (Stai cercando di trovare un'alternativa a onload?)

— STW

388

Se vuoi che il metodo onload prenda i parametri, puoi fare qualcosa di simile a questo:

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

Ciò vincola l'onload a una funzione anonima, che una volta invocata, eseguirà la funzione desiderata, con qualunque parametro tu le dia. E, naturalmente, puoi eseguire più di una funzione dall'interno della funzione anonima.

— Matt Sieker
fonte

E ora quando includo dinamicamente una pagina generata dal server e ho bisogno di predisposizione per il DOM, devo lavorare attraverso questo campo minato. Se solo qualcuno avrebbe incoraggiato correttamente l'utente della biblioteca in precedenza.

— Stefan Kendall,

4

Non ho detto che fosse una buona idea. Sebbene lo sviluppatore principale in cui lavoro abbia un forte caso di sindrome di Non inventato qui, e non sono stato in grado di convincerlo a usare jquery, al di fuori di alcune pagine.

— Matt Sieker,

2

Quindi forse dovresti cambiare lavoro. Se lo strumento giusto per il lavoro non è lo strumento che stai usando, perché battere la testa contro il muro combattendo costantemente l'incompetente?

— Stefan Kendall,

E posso chiamare la stessa tua seconda funzione usando l'evento onclick sul pulsante?

— Faizan,

73

Un altro modo per farlo è usare i listener di eventi, ecco come li usi:

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

Spiegazione:

DOMContentLoaded Significa che quando gli oggetti DOM del documento sono completamente caricati e visti da JavaScript, anche questo potrebbe essere stato "click", "focus" ...

function () Funzione anonima, verrà invocata quando si verifica l'evento.

— Ahmed Jolani
fonte

5

Si noti che questo non funzionerà in IE 8 e versioni precedenti. Altrimenti questa è la migliore soluzione JS pura!

— Philipp,

46

La tua domanda originale non era chiara, supponendo che la modifica / interpretazione di Kevin fosse corretta, quindi questa prima opzione non si applica

Le opzioni tipiche sono l'utilizzo onloaddell'evento:

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

Puoi anche posizionare il tuo javascript alla fine del corpo; non inizierà l'esecuzione fino a quando il documento non sarà completo.

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

E, un'altra opzione, è considerare l'utilizzo di un framework JS che intrinsecamente fa questo:

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

— STW
fonte

Il javascript:in the onloadnon è necessario, anche se non dannoso.

— icktoofay,

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

— Gunasegar il

37

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

window.onload = yourfunction;

O con jQuery se vuoi:

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

Se vuoi chiamare più di una funzione al caricamento della pagina, dai un'occhiata a questo articolo per maggiori informazioni:

Utilizzo di più funzioni di caricamento JavaScript

— Sarfraz
fonte

3

Questo non è corretto, la funzione verrà eseguita e assegnerà tutto ciò che ritorna al caricamento. Il () non dovrebbe essere lì.

— epascarello,

1

Se ci sono altre funzioni che stanno ascoltando l'evento onload, ciò le farà esplodere. Meglio aggiungere un listener di eventi piuttosto che assegnare direttamente un gestore di eventi. Anche in questo caso lo assegneresti come `window.onload = yourfunction 'senza la chiusura della funzione, non come la hai. La tua strada cerca di eseguire la tua funzione () al momento dell'incarico.

— Robusto,

che assegnerà il valore restituito della funzione a window.onload, che non funzionerà, a meno che il valore restituito non sia una funzione.

— I.devries

@epascarello: buona cattura, risolto, vedi l'abitudine quando scrivi i nomi delle funzioni. Grazie

— Sarfraz,

1

window.onload = yourfunction; Il problema con questo modo è che non accetta il parametro fucntion !!

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

Espandi frammento

— anonimo
fonte

3

Penso che la sua risposta sia chiara, come puoi vedere lo script è inserito nel tag head permettendo così che venga eseguito prima del contenuto del corpo .. o diciamo precaricare le sue funzioni o qualsiasi altra cosa .. a volte una persona fa domande perché non Non lo so affatto, ma non è mai il caso in cui qualcuno ti nutrirebbe con il cucchiaio, e nessuno in questa comunità lo farebbe, devi cercare un po 'di più le cose da solo. # particular_that_you're_a_web_developer

— M03

8

Devi chiamare la funzione che vuoi essere chiamata al caricamento (ad esempio, caricamento del documento / pagina). Ad esempio, la funzione che si desidera caricare quando il caricamento di documenti o pagine è denominata "yourFunction". Questo può essere fatto chiamando la funzione all'evento load del documento. Si prega di consultare il codice qui sotto per maggiori dettagli.

Prova il codice qui sotto:

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

6

ecco il trucco (funziona ovunque):

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

— Abhishek
fonte

1

Per rilevare html caricato (dal server) inserito in uso DOM MutationObservero rilevare momento nella funzione loadContent quando i dati sono pronti per l'uso

Mostra snippet di codice

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>

Espandi frammento

— Kamil Kiełczewski
fonte