Odpowiedzi:
window.onload = myOnloadFunci <body onload="myOnloadFunc();">są różne sposoby korzystania z tego samego wydarzenia . Korzystanie window.onloadjest jednak mniej nachalne - usuwa JavaScript z HTMLa.
Wszystkie popularne biblioteki JavaScript, Prototyp, ExtJS, Dojo, JQuery, YUI itp. Zapewniają ładne opakowanie wokół zdarzeń pojawiających się podczas ładowania dokumentu. Możesz nasłuchiwać zdarzenia okna onLoad i reagować na to, ale onLoad nie jest uruchamiany, dopóki nie zostaną pobrane wszystkie zasoby, więc program obsługi zdarzeń nie zostanie uruchomiony, dopóki nie zostanie pobrany ostatni wielki obraz. W niektórych przypadkach jest to dokładnie to, czego chcesz, w innych może się okazać, że nasłuchiwanie, gdy DOM jest gotowy, jest bardziej odpowiednie - to zdarzenie jest podobne do onLoad, ale jest uruchamiane bez oczekiwania na pobranie obrazów itp.
myOnloadFunc()w kontekście globalnym ( thisbędzie się odnosić window). Ustawienie go za pomocą javascript spowoduje, że będzie on wykonywany w kontekście elementu ( thisodnosi się do elementu, w którym zdarzenie zostało wywołane). W tym konkretnym przypadku nie zrobi to różnicy, ale zrobi to z innymi elementami.
thisrazie potrzeby zastąpić obiekt, do którego się odnosi.
Nie ma różnicy, ale nie powinieneś również używać.
W wielu przeglądarkach window.onloadzdarzenie nie jest uruchamiane, dopóki wszystkie obrazy nie zostaną załadowane, co nie jest tym, czego chcesz. Przeglądarki oparte na standardach mają wywoływane zdarzenie, DOMContentLoadedktóre uruchamia się wcześniej, ale nie jest obsługiwane przez IE (w momencie pisania tej odpowiedzi). Polecam użycie biblioteki javascript, która obsługuje funkcję DOMContentLoaded w różnych przeglądarkach, lub znalezienie dobrze napisanej funkcji, której można użyć. jQuery's $(document).ready()jest dobrym przykładem.
window.onloadmoże pracować bez ciała. Utwórz stronę zawierającą tylko tagi skryptu i otwórz ją w przeglądarce. Strona nie zawiera treści, ale nadal działa ...
<script>
function testSp()
{
alert("hit");
}
window.onload=testSp;
</script><!ELEMENT html (head, body)>[1] - i html401 Określa <!ELEMENT HTML O O (%html.content;)z <!ENTITY % html.content "HEAD, BODY">oraz [2]. html51 stwierdza również A head element followed by a body element.dla treści HTML. [3] w3.org/TR/xhtml1/dtds.html#a_dtd_XHTML-1.0-Strict w3.org/TR/xhtml1/dtds.html#a_dtd_XHTML-1.0-Strict w3.org/TR/html51/semantics.html#the -html-elementowa - Sądzę więc, że wszystkie z tych standardów HTML common / w obsłudze zrobić wymagają tag ciała. :)
Start tag: optional, End tag: optional
Ogólnie wolę nie używać <body onload=""zdarzenia. Myślę, że czystsze jest zachowanie zachowania w jak największym stopniu oddzielone od treści.
To powiedziawszy, są sytuacje (zwykle dla mnie dość rzadkie), w których użycie obciążenia ciała może nieco przyspieszyć.
Lubię używać Prototype, więc na ogół umieszczam coś takiego w <head>> mojej stronie:
document.observe("dom:loaded", function(){
alert('The DOM is loaded!');
});lub
Event.observe(window, 'load', function(){
alert('Window onload');
});Powyższe to sztuczki, których nauczyłem się tutaj . Bardzo podoba mi się koncepcja dołączania obsługi zdarzeń poza HTML.
(Edytuj, aby poprawić błąd pisowni w kodzie).
„tak wiele subiektywnych odpowiedzi na obiektywne pytanie. „Nienarzucający się” JavaScript to przesąd jak stara zasada, by nigdy nie używać gotos. Napisz kod w sposób, który pomoże ci niezawodnie osiągnąć swój cel, a nie zgodnie z czyimiś modnymi przekonaniami religijnymi.
Każdy, kto znajdzie:
<body onload="body_onload();">zbytnie rozpraszanie jest zbyt pretensjonalne i nie ma prostych priorytetów.
Zwykle umieszczam swój kod JavaScript w osobnym pliku .js, ale nie mam nic kłopotliwego w przechwytywaniu procedur obsługi zdarzeń w HTML, który jest przy okazji prawidłowym HTML.
window.onload- Wywoływany po całkowitym załadowaniu wszystkich plików DOM, JS, obrazów, ramek iframe, rozszerzeń i innych. Jest to równe $ (okno) .load (function () {});
body onload=""- Wywoływany po załadowaniu DOM. Jest to równe $ (dokument) .ready (function () {});
readyvs. uruchamia się po załadowaniu całego dokumentu, w tym wszystkich skryptów, obrazów i arkuszy stylów. odpala po zbudowaniu drzewa DOM, ale przed obrazami itp. Jego odpowiednik to nie . onloadloadDOMContentLoadedDOMContentLoadeddocument.readyload
Pomyśl o obciążeniu jak o każdym innym atrybucie. Na przykład w polu wprowadzania danych możesz umieścić:
<input id="test1" value="something"/>Lub możesz zadzwonić:
document.getElementById('test1').value = "somethingelse";Atrybut onload działa w ten sam sposób, z tą różnicą, że przyjmuje funkcję jako swoją wartość zamiast łańcucha, podobnie jak atrybut value. To wyjaśnia również, dlaczego można „użyć tylko jednego z nich” - wywołanie window.onload ponownie przypisuje wartość atrybutu onload dla tagu body.
Ponadto, jak mówią inni tutaj, zwykle czystsze jest utrzymywanie stylu i javascript oddzielonych od zawartości strony, dlatego większość osób zaleca używanie window.onload lub podobnej funkcji jQuery.
<body onload = ""> powinien zastąpić window.onload.
W przypadku <body onload = ""> document.body.onload może mieć wartość null, niezdefiniowaną lub funkcję zależną od przeglądarki (chociaż getAttribute („onload”) powinien być dość spójny, aby uzyskać treść funkcji anonimowej jako ciąg znaków) . Dzięki window.onload, po przypisaniu do niego funkcji, window.onload będzie funkcją konsekwentnie we wszystkich przeglądarkach. Jeśli to dla Ciebie ważne, użyj window.onload.
Window.onload i tak lepiej oddziela JS od treści. Zresztą nie ma żadnego powodu, aby używać <body onload = "">, gdy można użyć window.onload.
W Operze celem zdarzenia dla window.onload i <body onload = ""> (a nawet window.addEventListener („load”, func, false)) będzie okno zamiast dokumentu, jak w Safari i Firefox. Ale „to” będzie oknem w różnych przeglądarkach.
Oznacza to, że gdy ma to znaczenie, powinieneś owinąć to miejsce i zapewnić spójność rzeczy lub skorzystać z biblioteki, która zrobi to za Ciebie.
Oba działają tak samo. Należy jednak pamiętać, że jeśli oba są zdefiniowane, tylko jeden z nich zostanie wywołany. Generalnie unikam używania któregokolwiek z nich bezpośrednio. Zamiast tego możesz dołączyć moduł obsługi zdarzeń do zdarzenia load. W ten sposób można łatwiej włączyć inne pakiety JS, które mogą wymagać dołączenia wywołania zwrotnego do zdarzenia onload.
Każdy framework JS będzie miał metody obsługi różnych przeglądarek dla procedur obsługi zdarzeń.
Jest przyjętym standardem oddzielenia treści, układu i zachowania. Tak więc window.onload () będzie bardziej odpowiedni do użycia niż <body onload="">oba wykonują tę samą pracę.
Przepraszam za reinkarnację tego wątku ponownie po kolejnych 3 latach snu, ale być może w końcu znalazłem niepodważalną korzyść z window.onload=fn1;ponad <body onload="fn1()">. Dotyczy modułów JS lub modułów ES : gdy Twój onloadprogram obsługi znajduje się w „klasycznym” pliku JS (tzn. Odwoływanie się bez niego <script type="module" … >, jest to możliwe, gdy twój onloadprogram obsługi znajduje się w pliku JS „modułu” (tzn. W odniesieniu do niego <script type="module" … >, <body onload="fn1()">nie powiedzie się z „fn1 () nie jest zdefiniowany "błąd. Być może przyczyną jest to, że moduły ES nie są ładowane przed parsowaniem HTML… ale to tylko moje przypuszczenie. W każdym razie window.onload=fn1;działa idealnie z modułami ...