Come eseguire una funzione quando la pagina è caricata?

246

Voglio eseguire una funzione quando la pagina è caricata, ma non voglio usarla nel <body>tag.

Ho uno script che viene eseguito se lo inizializzo in <body>, in questo modo:

function codeAddress() {
  // code
}

<body onLoad="codeAddress()">

Ma voglio eseguirlo senza il <body onload="codeAddress()">e ho provato molte cose, ad esempio questo:

window.onload = codeAddress;

Ma non sta funzionando.

Quindi, come posso eseguirlo quando la pagina viene caricata?

javascript html onload

— Claes Gustavsson
fonte

Stai correndo window.onload = codeAddressdopo aver codeAddress()definito? In tal caso, dovrebbe funzionare. Sei sicuro che non ci sia un errore altrove?

— Skilldrick,

Questo non ha alcun senso. window.onload viene eseguito dopo il caricamento della pagina e tutti i javascript sono disponibili, quindi la funzione codeAddress () può essere dichiarata ovunque all'interno della pagina o file js collegati. Non deve venire prima a meno che non sia stato chiamato durante il caricamento della pagina stessa.

— Jared Farrish,

@Jared Sì. Dai un'occhiata a jsfiddle.net/HZHmc . Non funziona Ma se sposti window.onload dopo la definizione: jsfiddle.net/HZHmc/1 funziona.

— Skilldrick,

Una dichiarazione di funzione viene generalmente sollevata nella parte superiore dell'ambito, quindi la funzione può essere dichiarata ovunque in un ambito accessibile.

— Russ Cam

4

tutti i browser più diffusi sono in grado di visualizzare errori javascript - ne ricevi uno?

— Christoph,

354

window.onload = codeAddress;dovrebbe funzionare - ecco una demo e il codice 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>

Espandi frammento

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

Espandi frammento

— Darin Dimitrov
fonte

3

Come ho detto nella mia risposta, non c'è niente di sbagliato nel codice visto - il motivo per cui non funziona deve essere un errore in JS da qualche parte.

— Skilldrick,

se si inserisce un paragrafo con il testo nel corpo, non verrà caricato fino a quando non si fa clic su OK.

— Verde fluorescente 5

Questo gestore di eventi globali è disponibile solo in Chrome. developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/…

— Devappended

177

Invece di utilizzare jQuery o window.onload, JavaScript nativo ha adottato alcune fantastiche funzioni dal rilascio di jQuery. Tutti i browser moderni ora hanno la loro funzione DOM ready senza l'uso di una libreria jQuery.

Lo consiglierei se usi Javascript nativo.

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

— Spencer May
fonte

4

(domanda noob: che cosa fa false?)

— ᔕᖺᘎᕊ

7

@ ᔕᖺᘎᕊ per la proprietà 'bolle' (che non devi includere, devo solo compilare tutti i booleani per una buona abitudine). C'è anche un'altra istruzione booleana per la proprietà 'annullabile', ma non è molto utile poiché l'istruzione sopra è già non annullabile. Leggi di più qui: developer.mozilla.org/en-US/docs/Web/Events/DOMContentLoaded

— Spencer,

1

Questo è quello che stavo cercando in questo momento :) Esegue quando il DOM è completo, quindi puoi manipolarlo, non quando il browser dice "pagina completamente caricata", che può richiedere alcuni secondi, sulla base di elementi esterni (come gli annunci)

— Nathanyel

1

@ x-yuri "L'evento DOMContentLoaded viene generato quando il documento è stato completamente caricato e analizzato, senza attendere il completamento del caricamento di fogli di stile, immagini e sottotelai (l'evento di caricamento può essere utilizzato per rilevare una pagina completamente caricata)." - stackoverflow.com/questions/2414750/…

— Spencer

1

window.onloadpuò essere impostato solo una volta. Se si desidera eseguire due funzioni con caricamento window.onload, la seconda sovrascriverà la prima.

— Yay295

46

Prendendo la risposta di Darin ma stile jQuery. (So che l'utente ha richiesto javascript).

violino da corsa

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

— Mangia a Joes
fonte

4

La tua risposta mi ha insegnato, ma non su jQuery / javascript.

— unicorn2

2

@VijayKumar questo è jQuery, non Javascript nativo quindi hai bisogno di una libreria jQuery inclusa perché funzioni

— Spencer,

30

Soluzione alternativa. Preferisco questo per la brevità e la semplicità del codice.

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

Questa è una funzione anonima, in cui il nome non è specificato. Quello che succede qui è che la funzione è definita ed eseguita insieme. Aggiungilo all'inizio o alla fine del corpo, a seconda che debba essere eseguito prima di caricare la pagina o subito dopo il caricamento di tutti gli elementi HTML.

— Habeeb
fonte

1

Questo è l'unico codice che funziona con l'anteprima HTML per GitHub: htmlpreview.github.io L' altro codice, sebbene corretto, è rovinato da questa anteprima HTML.

— Jason Doucette,

2

Qualcuno può spiegare in che modo è diverso dal mettere i tag di script alla fine della pagina HTML e lo scopo della funzione anonima?

— Pat-Laugh,

10

window.onload = function() { ... ecc. non è un'ottima risposta.

Questo probabilmente funzionerà, ma interromperà anche qualsiasi altra funzione già collegata a quell'evento. Oppure, se un'altra funzione si aggancia a quell'evento dopo il tuo, si romperà il tuo. Quindi, puoi passare molte ore dopo a cercare di capire perché qualcosa che funzionava non lo è più.

Una risposta più solida qui:

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

Qualche codice che ho usato, dimentico dove l'ho trovato per dare credito all'autore.

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

Spero che questo ti aiuti :)

— Volere
fonte

grazie per aver fornito ulteriori informazioni onloadsull'utilizzo

— CybeX il

4

Prova readystatechange

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

dove gli stati sono:

caricamento : il documento si sta caricando (non attivato nello snippet)
interattivo : il documento viene analizzato, sparato in precedenzaDOMContentLoaded
completo : il documento e le risorse vengono caricati, attivati in precedenzawindow.onload

Mostra snippet di codice

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

Espandi frammento

— Kamil Kiełczewski
fonte

3

Dai un'occhiata allo script domReady che consente di eseguire l'impostazione di più funzioni quando il DOM è stato caricato. Fondamentalmente è ciò che fa Dom pronto in molte librerie JavaScript popolari, ma è leggero e può essere preso e aggiunto all'inizio del file di script esterno.

Esempio di utilizzo

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

function codeAddress() {

}

domReady(codeAddress);

— Russ Cam
fonte

0

window.onload funzionerà in questo modo:

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>

Espandi frammento

— Rudra
fonte