Jak uruchomić funkcję po załadowaniu strony?

246

Chcę uruchomić funkcję po załadowaniu strony, ale nie chcę jej używać w <body>tagu.

Mam skrypt, który uruchamia się, jeśli zainicjuję go w <body>następujący sposób:

function codeAddress() {
  // code
}

<body onLoad="codeAddress()">

Ale chcę go uruchomić bez <body onload="codeAddress()">i próbowałem wielu rzeczy, np .:

window.onload = codeAddress;

Ale to nie działa.

Jak więc go uruchomić, gdy strona jest ładowana?

javascript html onload Claes Gustavsson
źródło
Czy biegniesz window.onload = codeAddresspo codeAddress()jest zdefiniowany? Jeśli tak, to powinno działać. Czy na pewno nie ma błędu w innym miejscu?
Skilldrick 30.01.11
To nie ma sensu. Window.onload działa po załadowaniu strony i cały javascript jest dostępny, więc funkcję codeAddress () można zadeklarować w dowolnym miejscu strony lub połączonych plików js. Nie musi to nastąpić wcześniej, chyba że zostało wywołane podczas samego ładowania strony.
Jared Farrish 30.01.11
@Jared Tak to robi. Zajrzyj na stronę jsfiddle.net/HZHmc . To nie działa Ale jeśli przeniesiesz window.onload po definicji: jsfiddle.net/HZHmc/1, to zadziała.
Skilldrick 30.01.11
Deklaracja funkcji jest generalnie podnoszona na szczyt zakresu, więc funkcję można zadeklarować w dowolnym miejscu w dostępnym zakresie.
Russ Cam
4
wszystkie popularne przeglądarki mogą wyświetlać błędy javascript - otrzymujesz jakieś?
Christoph

Odpowiedzi:

354

window.onload = codeAddress;powinien działać - oto wersja demonstracyjna i pełny kod:

<!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>
Rozwiń fragment kodu

<!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>
Rozwiń fragment kodu

Darin Dimitrov
źródło
3
Jak powiedziałem w mojej odpowiedzi, nie ma nic złego w widzianym kodzie - powodem, dla którego nie działa, musi być gdzieś błąd w JS.
Skilldrick 30.01.11
jeśli umieścisz akapit z tekstem w treści, nie zostanie on załadowany, dopóki nie klikniesz OK.
FluorescentGreen5
Ten globalny moduł obsługi zdarzeń jest dostępny tylko w Chrome. developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/…
Devappended
177

Zamiast używać jQuery lub window.onload, natywny JavaScript przyjął kilka świetnych funkcji od czasu wydania jQuery. Wszystkie współczesne przeglądarki mają teraz swoją własną funkcję DOM bez użycia biblioteki jQuery.

Polecam to, jeśli używasz natywnego Javascript.

document.addEventListener('DOMContentLoaded', function() {
    alert("Ready!");
}, false);
Spencer May
źródło
4
(pytanie noob: co robi false?)
2015
7
@ ᔕᖺᘎᕊ dla właściwości „bąbelków” (której nie musisz uwzględniać, po prostu wypełniam wszystkie wartości logiczne dla dobrego nawyku). Istnieje również inna instrukcja typu boolean dla właściwości „cancelable”, ale nie jest to bardzo przydatne, ponieważ powyższej instrukcji już nie można anulować. Przeczytaj więcej na ten temat tutaj: developer.mozilla.org/en-US/docs/Web/Events/DOMContentLoaded
Spencer
1
Właśnie tego szukałem teraz :) Wykonuje się, gdy DOM jest kompletny, więc możesz nim manipulować, a nie wtedy, gdy przeglądarka mówi „strona całkowicie załadowana”, co może potrwać kilka sekund, w zależności od elementów zewnętrznych (takich jak reklamy)
Nathanyel
Pytanie nieco noob, co jeśli nie wiesz, czy strona jest załadowana, czy nie? Edycja: Ah: document.readyState
Brian Hannay
1
@ x-yuri „Zdarzenie DOMContentLoaded jest uruchamiane, gdy dokument zostanie całkowicie załadowany i przeanalizowany, bez oczekiwania na zakończenie ładowania arkuszy stylów, obrazów i podramek (zdarzenia ładowania można użyć do wykrycia w pełni załadowanej strony).” - stackoverflow.com/questions/2414750/…
Spencer
46

Biorąc odpowiedź Darina, ale styl jQuery. (Wiem, że użytkownik poprosił o javascript).

bieganie skrzypce

$(document).ready ( function(){
   alert('ok');
});​
Jedz w Joes
źródło
4
Twoja odpowiedź nauczyła mnie dużo, ale nie o jQuery / javascript.
unicorn2
2
@VijayKumar to jQuery, a nie natywny Javascript, więc potrzebujesz do tego biblioteki jQuery
Spencer
30

Alternatywne rozwiązanie Wolę to ze względu na zwięzłość i prostotę kodu.

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

Jest to anonimowa funkcja, w której nazwa nie jest określona. To, co się tutaj dzieje, polega na tym, że funkcja jest definiowana i wykonywana razem. Dodaj to na początku lub na końcu treści, w zależności od tego, czy ma zostać wykonane przed załadowaniem strony, czy wkrótce po załadowaniu wszystkich elementów HTML.

Habeeb
źródło
1
Jest to jedyny kod, który działa z podglądem HTML dla GitHub: htmlpreview.github.io Inny kod, choć poprawny, jest zniszczony przez ten podgląd HTML.
Jason Doucette
1
Czy ktoś może wyjaśnić, czym to się różni od umieszczenia znaczników skryptu na końcu strony HTML i celu anonimowej funkcji?
Pat-Laugh,
10

window.onload = function() { ... itd. nie jest świetną odpowiedzią.

To prawdopodobnie zadziała, ale zepsuje również wszelkie inne funkcje, które już przechwytują to zdarzenie. Lub, jeśli inna funkcja zaczepi się o to zdarzenie po twoim, spowoduje to uszkodzenie twojego. Możesz więc spędzić wiele godzin później, próbując dowiedzieć się, dlaczego coś, co działało, już nie jest.

Bardziej solidna odpowiedź tutaj:

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

Używam kodu, którego nie pamiętam, żeby go przypisać autorowi.

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

Mam nadzieję że to pomoże :)

Będzie
źródło
dzięki za dostarczenie dodatkowego wglądu w onloadużytkowanie
CybeX
4

Wypróbuj readystatechange

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

gdzie są stany:

  • ładowanie - trwa ładowanie dokumentu (nie jest uruchamiany we fragmencie)
  • interaktywny - dokument jest parsowany, uruchamiany wcześniejDOMContentLoaded
  • ukończone - dokument i zasoby są ładowane, uruchamiane wcześniejwindow.onload

Pokaż fragment kodu

Kamil Kiełczewski
źródło
3

Spójrz na skrypt domReady, który pozwala skonfigurować wiele funkcji, które będą wykonywane po załadowaniu DOM. Jest to w zasadzie to, co robi Dom ready w wielu popularnych bibliotekach JavaScript, ale jest lekki i można go zabrać i dodać na początku zewnętrznego pliku skryptu.

Przykładowe użycie 

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

function codeAddress() {

}

domReady(codeAddress);
Russ Cam
źródło
0

Window.onload będzie działał w następujący sposób:

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>
Rozwiń fragment kodu

Rudra
źródło