window.onload vs <gövde yükü = “” />


227

Tam arasındaki fark nedir window.onloadolayın ve onloaddurumunda bodyetiketi? hangisini ne zaman kullanmalıyım ve doğru şekilde yapılmalı?


2
değer değerini çevrelemek için kullanmalısınız
Sven Larson

Yanıtlar:


218

window.onload = myOnloadFuncve aynı etkinliği<body onload="myOnloadFunc();"> kullanmanın farklı yollarıdır . Kullanmak daha az rahatsız edici - JavaScript'inizi HTML'den çıkarır.window.onload

Tüm yaygın JavaScript kitaplıkları, Prototip, ExtJS, Dojo, JQuery, YUI, vb. Belge yüklendikçe meydana gelen olayların etrafında güzel sarmalayıcılar sağlar. OnLoad olayını dinleyebilir ve buna tepki verebilirsiniz, ancak onLoad tüm kaynaklar indirilene kadar tetiklenmez, bu nedenle olay işleyiciniz son büyük görüntü alınana kadar yürütülmez. Bazı durumlarda tam olarak istediğiniz budur, bazılarında DOM hazır olduğunda dinlemenin daha uygun olduğunu görebilirsiniz - bu olay onLoad'a benzer, ancak resim beklemeden vb.


57
Bununla birlikte, bir fark olduğu belirtilmelidir. Satır içi onload olayı myOnloadFunc()genel bağlamda çağrılacaktır ( thisatıfta bulunulacaktır window). Javascript ile ayarlanması, öğenin bağlamında yürütülmesini sağlayacaktır ( thisolayın tetiklendiği öğeye atıfta bulunur). Bu özel durumda, bir fark yaratmaz, ancak diğer unsurlarla birlikte olur.
mowwwalker

1
@Walkerneo: Evet, kesinlikle kayda değer. Tabii ki, bir JS kütüphanesi kullanılarak thisistenirse atıfta bulunulan nesneyi geçersiz kılabilirsiniz .
Richard Turner

@RichardTurner Bağlam bağlamayı değiştirmek için kitaplık kullanmanıza gerek yoktur. Basit bir .bind () çağrısı bunu yapar
Kloar

@Kloar bugünlerde yapabilirsin, evet, ama MSIE9 + 'a ihtiyacın var. Yanıt verdiğimde çok daha yaygın olan eski MSIE'de çok dolguya ihtiyacınız olacak.
Richard Turner

33

Fark yok, ama ikisini de kullanmamalısın.

Birçok tarayıcıda, window.onloadtüm resimler yüklenene kadar olay tetiklenmez; bu, istediğiniz şey değildir. Standart tabanlı tarayıcıların daha DOMContentLoadedönce tetiklenen bir olayı vardır, ancak IE tarafından desteklenmez (bu yanıtı yazarken). Bir çapraz tarayıcı DOMContentLoaded özelliğini destekleyen bir javascript kütüphanesi kullanmanızı veya kullanabileceğiniz iyi yazılmış bir işlev bulmanızı öneririm. jQuery's $(document).ready(), iyi bir örnektir.


53
Gelecekten gelen soru ... Ya jquery yoksa?
Sid

54
Şimdiki soru .. Ya jQuery eldeki proje için aşırı dolu ise? (
JQuery'yi

14
"IE tarafından desteklenmiyor" demek evrensel bir gerçek mi, yoksa sadece IE'nin belirli sürümleri için mi geçerli? Bu cevabı yazdığınızdan beri tarayıcı dünyasında çok şey değiştiği için, belki de bu cevabı güncelleme zamanı?
Bryan Oakley

8
DOMContentLoaded artık IE9 ve üstü tarafından desteklenmektedir: developer.mozilla.org/en-US/docs/Web/Events/DOMContentLoaded
Adam

6
Gelecekten raporlama yapan DOMContentLoaded artık tüm büyük tarayıcılar tarafından destekleniyor: caniuse.com/#feat=domcontentloaded
Jose Gómez

21

window.onloadvücut olmadan çalışabilir. Yalnızca komut dosyası etiketleriyle sayfa oluşturun ve bir tarayıcıda açın. Sayfa herhangi bir gövde içermiyor, ancak hala çalışıyor ..

<script>
  function testSp()
  {
    alert("hit");
  }
  window.onload=testSp;
</script>

6
Aslında içerik eklerseniz (gövde etiketinde olması gerekir) gövde etiketi olmayan HTML geçersizdir. Ayrıca komut dosyası etiketinizde bir tür eksik. Standartlara uygun olmayan kodunuzu sabitleyen tarayıcılara asla güvenmeyin! (Tarayıcılar geçmişte veya gelecekte farklı bir şekilde yapabilir veya hiç
yapamayabilir

4
@Kissaki: Standart HTML'nin bir gövde etiketine ihtiyacı yoktur!
Robert Siemer

5
xhtml1 belirtir <!ELEMENT html (head, body)>[1] - ve html401 belirtir <!ELEMENT HTML O O (%html.content;)ile <!ENTITY % html.content "HEAD, BODY">de [2]. html51 A head element followed by a body element., html içeriği için de geçerlidir. [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-element - Sanırım tüm bu yaygın / kullanılan HTML standartlarının bir gövde etiketi gerektirdiğini düşünüyorum . :)
Kissaki

1
@Kissaki, HTML değil XHTML. HTML, SGML DTD'ye göre hem başlangıç ​​hem de bitiş gövde etiketlerinin etiket atlanmasına ve html ve kafa etiketlerinin atlanmasına izin verir. w3.org/TR/html401/struct/global.html#edef-BODY Start tag: optional, End tag: optional
OdraEncoded

1
@Kissaki: html5'in artık komut dosyası türüne ihtiyacı yoktur (javascript ise), önceki sürümler için haklısınız demektir.
Mark

10

Ben, genel olarak tercih değil kullanın <body onload=""> Etkinliği. Davranışı mümkün olduğunca içerikten ayırmanın daha temiz olduğunu düşünüyorum.

Bununla birlikte, vücut yükü kullanmanın hafif bir hız artışı sağlayabileceği durumlar vardır (genellikle benim için oldukça nadirdir).

Ben genellikle <headbenim sayfamın> içine böyle bir şey koymak Prototip kullanmak istiyorum :

document.observe("dom:loaded", function(){
  alert('The DOM is loaded!');
});

veya

Event.observe(window, 'load', function(){
  alert('Window onload');
});

Yukarıdakiler burada öğrendiğim hileler . HTML dışındaki olay işleyicileri ekleme kavramına çok düşkündüm.

(Koddaki yazım hatasını düzeltmek için düzenleyin.)


Hangi durumlarda daha hızlı olurdu ve neden?
Kissaki

Bu cevap tüm “Ben” ler ile çok öznel görünmektedir (“Ben tercih ediyorum”, “sanırım”). Eğer nesnel ve doğrulanabilir gerçeklerden başka bir şey yoksa, bu izlenimi hemen hemen destekler.
Kissaki

1
Bu cevabı, 6 yıl önce yayınlandığını düşünerek bir tuz tanesi ile alacağım. Güncellemekten veya kendi gelişmiş yanıtınızı göndermekten memnuniyet duyarsınız.
Mark Biek

7

Nesnel bir soruya çok fazla öznel cevap. "Göze batmayan" JavaScript, asla goto kullanmamak için eski kural gibi batıl inançtır. Kodu, birinin modaya uygun dini inançlarına göre değil, hedefinize güvenilir bir şekilde ulaşmanıza yardımcı olacak bir şekilde yazın.

Bulan herkes:

 <body onload="body_onload();">

aşırı dikkat dağıtıcı olmak aşırı iddialıdır ve öncelikleri düz değildir.

Normalde JavaScript kodumu ayrı bir .js dosyasına koydum, ancak bu arada geçerli HTML olan olay işleyicilerini HTML'de takma konusunda hantal bir şey bulamıyorum.


39
Göze batmayan javascript yazmanın iyi bir nedeni var. 100 sayfalık bir web uygulamanız olduğunu ve her sayfanın içerdiği javascript dosyasına koymak yerine <body onload = "body_onload ();"> yöntemini kullandığınızı varsayalım. O zaman, bir nedenden dolayı bu işlevin adını değiştirmeniz gerektiğini düşünün. Etkinliği dahil edilen javascript dosyasına koymak 1) değişiklikleri çok daha basit hale getirir ve 2) javascript dosyaları aynı kodu tekrar tekrar indirmek yerine bir yıl boyunca (düzgün yapılandırılmış bir sunucuda) önbelleğe alınabileceğinden sunucu kaynaklarını korur.
Andrew Ensley

21
Yani neden bir şey tavsiye öğrenme rahatsız etmeyin çünkü önerileri "moda dini inançlar" etiket?
koridorlar

6
Soru, daha iyi bir öneri talebi ile birlikte "bu iki yöntem arasındaki fark nedir?" Sorusudur. Yanıtınız bu soruya nasıl cevap veriyor?
Richard Turner

1
Büyük bir dosya kütlesine uygulanabilecek 1 yerde modüler bir çözüm yaptığınız her durum, kodu her bir dosya kütlesinin kendisine eklemekten çok daha iyidir. Orijinal oluşturma süresi, kod düzenleme amaçları, okunabilirlik ve gelecekteki düzenleme için daha iyidir. Modaya uygun değil, aslında java ve c ++ gibi dillerde mevcut olan eski bir konsept, web programcılarının şimdi kodlamanın çok daha iyi bir yolu olarak kucaklıyor.
Jimbo Jonny

1
Modern tarayıcılarda XSS saldırılarına karşı iyi bir savunma, İçerik Güvenliği Politikanızla tüm satır içi javascript'i devre dışı bırakmaktır. Bu, HTML'nizde onload özelliğini kullanmamak için oldukça iyi bir neden.
Greg Ball

4

window.onload- Tüm DOM, JS dosyaları, Görüntüler, Iframe'ler, Uzantılar ve diğerleri tamamen yüklendikten sonra çağrılır. Bu, $ (window) .load (function () {});

body onload=""- DOM yüklendikten sonra çağrılır. Bu, $ (document) .ready (function () {});


1
Birisi bunu kaynaklayabilir mi? Bu bildirimi birçok forumda gördüm, ancak teknik özelliklerde tanımlandığı yere bir bağlantıyla asla.
crempp

1
@crempp Gövde öğesi ve Global nitelikler var , bu yüzden bunun doğru olmadığını söyleyebilirim. Ancak bunu kendiniz test edebilirsiniz, bkz. Jsbin.com/OmiViPAJ/1/edit . Orada, görüntü onload olayının gövde onload olayından önce tetiklendiğini görebilirsiniz .
Olaf Dietsche

2
Bu cevap başkalarıyla çelişiyor; bir kaynak sağlayabilir misin?
Jimmy Breck-McKye

2
api.jquery.com/ready jQuery belgeleri şöyle der: ".ready () yöntemi genellikle <body onload =" "> özniteliğiyle uyumsuzdur." Ben jQuery daha body.onload $ (pencere) .load (..) yakın olduğunu düşünüyorum ama yine de farklı olduğunu düşünüyorum.
ccsakuweb

2
Bu cevap tamamen yanlıştır ve oyları olmamalıdır. Aslında bu tür bir cevap genellikle olaylara readykarşı en büyük yanılgılar arasında sayılmaktadır onload. loadtüm komut dosyaları, resimler ve stil sayfaları dahil olmak üzere tüm belge yüklendikten sonra patlar. DOMContentLoadedinşa edilmiştir DOM ağacının sonra ancak resimlerin vb Onun öncesinde yangınlar DOMContentLoadeddenklik vardır document.ready, değil load.
rism

2

Orada hiçbir fark ...

Yani her ikisini de kullanabilirsiniz (her seferinde bir tane! -)

Ama okunabilirlik ve html kodunun temizliği için her zaman window.onload! 'U tercih ederim!


1

Mütevazi JS kodu yazmaya çalışıyorsanız (ve olmalısınız), kullanmamalısınız <body onload="">.

Farklı tarayıcıların bu ikisini biraz farklı ele aldıklarını anlıyorum, ancak benzer şekilde çalışıyorlar. Çoğu tarayıcıda, her ikisini de tanımlarsanız, bir tanesi yok sayılır.


1

Yükü diğer özellikler gibi düşünün. Örneğin, bir giriş kutusuna şunları koyabilirsiniz:

<input id="test1" value="something"/>

Veya şunları arayabilirsiniz:

document.getElementById('test1').value = "somethingelse";

Onload özniteliği, value özniteliğinde olduğu gibi bir dize yerine değeri olarak bir işlev alması dışında aynı şekilde çalışır. Bu ayrıca neden "bunlardan sadece birini kullanabileceğinizi" açıklar - window.onload çağrısı, gövde etiketi için onload özniteliğinin değerini yeniden atar.

Ayrıca, buradaki diğerlerinin söylediği gibi, genellikle stil ve javascript'i sayfanın içeriğinden ayrı tutmak daha temizdir, bu yüzden çoğu insan window.onload veya jQuery'nin hazır işlevini kullanmanızı önerir.


1

<body onload = ""> window.onload öğesini geçersiz kılmalıdır.

<Body onload = ""> ile document.body.onload, tarayıcıya bağlı olarak null, undefined veya bir işlev olabilir (ancak anonim işlevin gövdesini dize olarak almak için getAttribute ("onload") biraz tutarlı olmalıdır) . Window.onload ile, ona bir işlev atadığınızda, window.onload tarayıcılarda sürekli bir işlev olacaktır. Bu sizin için önemliyse window.onload komutunu kullanın.

window.onload, JS'yi içeriğinizden yine de ayırmak için daha iyidir. Window.onload'u kullanabildiğinizde <body onload = ""> kullanmanın pek bir nedeni yoktur.

Opera'da, window.onload ve <body onload = ""> (ve hatta window.addEventListener ("load", func, false)) için olay hedefi, Safari ve Firefox'ta olduğu gibi belge yerine pencere olacaktır. Ancak, 'bu' tarayıcılardaki pencere olacaktır.

Bunun anlamı, önemli olduğunda, kabuğunu sarmalı ve işleri tutarlı hale getirmeli veya sizin için yapan bir kütüphane kullanmalısınız.


0

İkisi de aynı şekilde çalışıyor. Ancak, her ikisi de tanımlanırsa, bunlardan sadece birinin çağrıldığını unutmayın. Genellikle ikisini de doğrudan kullanmaktan kaçınırım. Bunun yerine, load olayına bir olay işleyicisi ekleyebilirsiniz. Bu şekilde, onload olayına geri çağrı eklemesi gerekebilecek diğer JS paketlerini daha kolay bir şekilde dahil edebilirsiniz.

Tüm JS çerçevelerinde olay işleyicileri için tarayıcılar arası yöntemler bulunur.


0

İçerik, düzen ve davranışın ayrı olması kabul edilen bir standarttır. Yani window.onload () kullanımı her <body onload="">ikisinin de aynı işi yapmasına rağmen daha uygun olacaktır .


0

Maalesef uyku başka 3 yıl sonra tekrar bu dişin reenkarnasyon için, ama belki de nihayet tartışılmaz yarar bulduk window.onload=fn1;üzerinde <body onload="fn1()">. Bu ilgilendiren JS modüllerini veya ES modülleri senin zaman: onload"klasik" JS dosyasına işleyicisi bulunduğu (yani olmadan sevk <script type="module" … >, her iki şekilde mümkündür; senin zaman onloadJS dosyasına "modülündeki" işleyicisi bulunduğu (yani birlikte anılan <script type="module" … >, <body onload="fn1()">fn1" başarısız olur () tanımlanmadı "hatası. Bunun nedeni, HTML ayrıştırılmadan önce ES modüllerinin yüklenmemesidir ... ancak bu benim tahminimdir. Her neyse, window.onload=fn1;modüller ile mükemmel şekilde çalışır ...

Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.