Jak wywołać funkcję JavaScript podczas ładowania strony?

Tradycyjnie, aby wywołać funkcję JavaScript po załadowaniu strony, należy dodać atrybut onload do ciała zawierającego bit JavaScript (zwykle tylko wywołanie funkcji) 

<body onload="foo()">

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

Czy jest jakaś inny sposób na wywołanie funkcji JavaScript podczas ładowania? Wolałbym nie używać jQuery, ponieważ nie jestem bardzo zaznajomiony z nim.

Author: Kamil Kiełczewski, 2010-10-01
Source

8 answers

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

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

Wiąże onload z funkcją anonimową, która po wywołaniu uruchomi żądaną funkcję, z dowolnymi parametrami, które podasz. I, oczywiście, możesz uruchomić więcej niż jedną funkcję z wewnątrz funkcji anonimowej.

 426
Author: Matt Sieker,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2014-03-04 11:12:53

Innym sposobem na to jest użycie słuchaczy zdarzeń, tutaj jak ich używasz: 

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

Wyjaśnienie:

DOMContentLoaded oznacza to, że gdy obiekty DOM dokumentu są w pełni załadowane i widoczne przez JavaScript, również mogło to być "kliknięcie","skupienie"...

Funkcja Function () Funkcja anonimowa, zostanie wywołana po wystąpieniu zdarzenia.

 81
Author: Ahmed Jolani,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2012-04-28 21:35:44

Twoje pierwotne pytanie było niejasne, zakładając, że edycja/interpretacja Kevina jest poprawna, ta pierwsza opcja nie ma zastosowania

Typowymi opcjami są zdarzenia onload: 

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

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

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

I, inną opcją, jest rozważenie użycia frameworka JS, który wewnętrznie to robi: 

// jQuery
$(document).ready( function () {
  SomeFunction();
});
 48
Author: STW,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2020-06-20 09:12:55 
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ę podczas ładowania strony, zajrzyj do tego artykułu, aby uzyskać więcej informacji:

 40
Author: Sarfraz,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-05-20 11:22:18 

<!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>
 9
Author: anonymous,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-04-03 08:49:09

Musisz wywołać funkcję, którą chcesz wywołać przy załadowaniu (np. załadowanie dokumentu / strony). Na przykład funkcja, którą chcesz załadować podczas ładowania dokumentu lub strony, nazywa się"twoja funkcja". Można to zrobić poprzez wywołanie funkcji przy zdarzeniu load dokumentu. Więcej szczegółów znajdziesz w poniższym kodzie.

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>
 8
Author: Amir Md Amiruzzaman,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2019-02-14 16:32:02

Oto sztuczka (działa wszędzie): 

r(function(){
alert('DOM Ready!');
});
function r(f){/in/.test(document.readyState)?setTimeout('r('+f+')',9):f()}
 5
Author: Abhishek,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-05-20 11:32:49

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

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>
 1
Author: Kamil Kiełczewski,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2019-07-31 05:25:43