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

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

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

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