Jak wywołać funkcję JavaScript przy ładowaniu strony?

244

Tradycyjnie, aby wywołać funkcję JavaScript po załadowaniu strony, należy dodać onloadatrybut do treści zawierający trochę kodu JavaScript (zwykle tylko wywoływanie funkcji)

<body onload="foo()">

Po załadowaniu strony chcę uruchomić kod JavaScript, aby dynamicznie zapełnić części strony danymi z serwera. Nie mogę użyć onloadatrybutu, ponieważ używam fragmentów JSP, które nie mają bodyelementu, do którego mogę dodać atrybut.

Czy istnieje inny sposób wywołania funkcji JavaScript podczas ładowania? Wolałbym nie używać jQuery, ponieważ nie znam go zbyt dobrze.

javascript onload

— palAlaa
źródło

15

btw: to Javascript; Java jest językiem, a Javascript innym. Nie ma czegoś takiego jak skrypt Java. Do Twojej wiadomości

— Yanick Rochon

Czy możesz zweryfikować, czy zmiana Kevina w twoim pytaniu wciąż zadaje to samo pytanie, czy możesz sformułować je inaczej, aby upewnić się, że rozumiemy? (Czy próbujesz znaleźć alternatywę dla onload?)

— STW

388

Jeśli chcesz, aby metoda onload pobierała parametry, możesz zrobić coś podobnego do tego:

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

Wiąże on onload z anonimową funkcją, która po wywołaniu uruchomi żądaną funkcję, bez względu na podane parametry. I oczywiście możesz uruchomić więcej niż jedną funkcję z wnętrza funkcji anonimowej.

— Matt Sieker
źródło

A teraz, gdy dynamicznie dołączam stronę generowaną przez serwer i potrzebuję gotowości do DOM, muszę przejść przez to pole minowe. Gdyby tylko ktoś wcześniej odpowiednio zachęcał użytkownika biblioteki.

— Stefan Kendall

4

Nie powiedziałem, że to dobry pomysł. Chociaż główny programista, w którym pracuję, ma silny przypadek zespołu Not Invented Here i nie udało mi się go przekonać do użycia jquery poza kilkoma stronami.

— Matt Sieker

2

Więc może powinieneś zmienić pracę. Jeśli odpowiednie narzędzie do pracy nie jest narzędziem, z którego korzystasz, po co uderzać głową o ścianę, nieustannie walcząc z niekompetentnymi?

— Stefan Kendall

I czy mogę wywołać tę samą funkcję po raz drugi za pomocą zdarzenia onclick na przycisku?

— Faizan,

73

Innym sposobem na to jest użycie detektorów zdarzeń, tutaj sposób ich użycia:

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

Wyjaśnienie:

DOMContentLoaded Oznacza to, że gdy obiekty DOM dokumentu zostaną w pełni załadowane i wyświetlone przez JavaScript, może to być również „kliknięcie”, „fokus” ...

function () Funkcja anonimowa zostanie wywołana, gdy nastąpi zdarzenie.

— Ahmed Jolani
źródło

5

Pamiętaj, że to nie będzie działać w IE 8 i niższych wersjach. W przeciwnym razie jest to najlepsze czyste rozwiązanie JS!

— Philipp

46

Twoje pierwotne pytanie było niejasne, przy założeniu, że edycja / interpretacja Kevina jest poprawna, to ta pierwsza opcja nie ma zastosowania

Typowe opcje to użycie onloadzdarzenia:

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

Możesz także umieścić javascript na samym końcu ciała; nie rozpocznie się, dopóki dokument nie zostanie ukończony.

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

Inną opcją jest rozważenie użycia frameworka JS, który sam w sobie robi:

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

— STW
źródło

javascript:W onloadto niepotrzebne, choć nie szkodliwe.

— icktoofay

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

— Gunasegar

37

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

window.onload = yourfunction;

Lub z jQuery, jeśli chcesz:

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

Jeśli chcesz wywołać więcej niż jedną funkcję przy ładowaniu strony, zapoznaj się z tym artykułem, aby uzyskać więcej informacji:

Korzystanie z wielu funkcji ładowania JavaScript

— Sarfraz
źródło

3

To nie jest poprawne, funkcja wykona i przypisze wszystko, co powróci do obciążenia. () Nie powinno tam być.

— epascarello

1

Jeśli istnieją inne funkcje, które nasłuchują zdarzenia onload, spowoduje to ich zdmuchnięcie. Lepiej jest dodać detektor zdarzeń niż bezpośrednio przypisywać moduł obsługi zdarzeń. Nawet w tym przypadku przypisalibyśmy to jako `window.onload = twoja funkcja 'bez zamknięcia funkcji, a nie w taki sposób, w jaki ją masz. Twoja droga próbuje wykonać twoją funkcję () w momencie przypisania.

— Robusto

przypisze wartość zwracaną funkcji do window.onload, co nie będzie działać, chyba że zwracana wartość jest funkcją.

— I.devries

@epascarello: Dobry chwyt, naprawiony, podczas pisania nazw funkcji widzisz nawyk. Dzięki

— Sarfraz,

1

window.onload = twoja funkcja; Problem z tym sposobem polega na tym, że nie przyjmuje parametru 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>

Rozwiń fragment kodu

— anonimowy
źródło

3

Myślę, że jego odpowiedź jest jasna, ponieważ widać, że skrypt jest umieszczony w tagu head, dzięki czemu można go wykonać przed zawartością treści .. lub, powiedzmy, wstępnie załadować jego funkcje lub cokolwiek innego ... czasami ktoś zadaje pytania, ponieważ nie „ Wiem, ale nigdy nie jest tak, że ktoś nakarmiłby cię łyżką, ani nikt w tej społeczności, musisz poszukać czegoś więcej. # szczególnie_that_you

— You're_a_web_developer

8

Musisz wywołać funkcję, którą chcesz wywołać przy ładowaniu (tj. Ładowaniu dokumentu / strony). Na przykład funkcja, którą chcesz załadować, gdy ładowanie dokumentu lub strony nazywa się „twojaFunkcja”. Można tego dokonać, wywołując funkcję zdarzenia ładowania dokumentu. Aby uzyskać więcej informacji, zobacz poniższy kod.

Wypróbuj poniższy kod:

<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
źródło

6

oto sztuczka (działa wszędzie):

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

— Abhishek
źródło

1

Do wykrywania załadowanego html (z serwera) wstawionego do DOM MutationObserverlub wykrycia momentu w funkcji loadContent, gdy dane są gotowe do użycia

Pokaż fragment kodu

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>

Rozwiń fragment kodu

— Kamil Kiełczewski
źródło