window.onload vs <body onload = "" />

227

Apa sebenarnya perbedaan antara window.onloadacara dan onloadacara bodytag? kapan saya menggunakan yang mana dan bagaimana harus dilakukan dengan benar?

javascript Manu
sumber

2

Anda harus menggunakan "untuk mengelilingi nilai atribut

Sven Larson

218

window.onload = myOnloadFuncdan <body onload="myOnloadFunc();">berbagai cara menggunakan acara yang sama . Namun penggunaannya window.onloadtidak terlalu mencolok - ini membuat JavaScript Anda keluar dari HTML.

Semua pustaka JavaScript umum, Prototipe, ExtJS, Dojo, JQuery, YUI, dll. Menyediakan pembungkus yang bagus di sekitar peristiwa yang terjadi saat dokumen dimuat. Anda dapat mendengarkan jendela acara onLoad, dan bereaksi terhadapnya, tetapi onLoad tidak diaktifkan hingga semua sumber daya diunduh, sehingga penangan acara Anda tidak akan dieksekusi sampai gambar besar terakhir diambil. Dalam beberapa kasus, itulah yang Anda inginkan, di kasus lain, Anda mungkin mendapati bahwa mendengarkan ketika DOM siap lebih tepat - acara ini mirip dengan onLoad tetapi menyala tanpa menunggu gambar, dll untuk diunduh.

Richard Turner
sumber

57

Namun perlu dicatat bahwa ada perbedaan. Acara onload inline akan memanggil myOnloadFunc()dalam konteks global ( thisakan merujuk ke window). Menyetelnya melalui javascript akan membuatnya dijalankan dalam konteks elemen ( thismerujuk pada elemen yang dipicu acara). Dalam kasus khusus ini, itu tidak akan membuat perbedaan, tetapi akan dengan elemen lain.

mowwwalker

1

@ Walkalko: Ya, pasti patut dicatat. Tentu saja, menggunakan perpustakaan JS yang dapat menimpa objek yang thismerujuk jika diinginkan.

Richard Turner

@ RichardTurner Anda tidak perlu menggunakan pustaka untuk mengubah konteks yang mengikat. Panggilan .bind () yang sederhana melakukan itu

Kloar

@Kloar kamu bisa hari ini, ya, tapi kamu butuh MSIE9 +. Pada MSIE yang lebih tua, yang jauh lebih umum ketika saya menjawab, Anda memerlukan polyfill.

Richard Turner

33

Tidak ada perbedaan, tetapi Anda tidak boleh menggunakan keduanya.

Di banyak browser, window.onloadacara tersebut tidak dipicu sampai semua gambar dimuat, yang bukan yang Anda inginkan. Browser berbasis standar memiliki acara yang dinamakan DOMContentLoadedkebakaran sebelumnya, tetapi tidak didukung oleh IE (pada saat penulisan jawaban ini). Saya akan merekomendasikan menggunakan perpustakaan javascript yang mendukung fitur DOMContentLoaded browser lintas, atau menemukan fungsi yang ditulis dengan baik yang dapat Anda gunakan. jQuery's $(document).ready(), adalah contoh yang bagus.

jcampbell1
sumber

53

Pertanyaan dari masa depan ... Bagaimana jika tidak ada jquery?

Sid

54

Pertanyaan dari sekarang .. Bagaimana jika jQuery berlebihan untuk proyek yang ditangani? (Tidak mengetuk jQuery, gunakan sendiri. Hanya kadang-kadang hanya ingin satu fitur keluar dari perpustakaan ..)

Bradmage

14

Ketika Anda mengatakan "tidak didukung oleh IE" apakah itu kebenaran universal, atau hanya berlaku untuk versi IE tertentu? Karena banyak yang berubah di dunia browser sejak Anda menulis jawaban ini, mungkin sekarang saatnya untuk memperbarui jawaban ini?

Bryan Oakley

8

DOMContentLoaded sekarang didukung oleh IE9 dan lebih tinggi: developer.mozilla.org/en-US/docs/Web/Events/DOMContentLoaded

Adam

6

Melaporkan dari masa depan, DOMContentLoaded sekarang didukung oleh semua browser utama: caniuse.com/#feat=domcontentloaded

Jose Gómez

21

window.onloaddapat bekerja tanpa tubuh. Buat halaman hanya dengan tag skrip dan buka di browser. Halaman tidak mengandung badan apa pun, tetapi masih berfungsi ..

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

john Joseph
sumber

6

HTML tanpa tag body tidak valid jika Anda benar-benar menambahkan konten (yang seharusnya dalam tag body). Tag skrip Anda juga tidak memiliki tipe. Jangan pernah mengandalkan browser untuk memperbaiki kode yang tidak sesuai standar Anda! (Seperti browser dapat melakukannya secara berbeda atau tidak sama sekali di masa lalu atau masa depan.)

Kissaki

4

@Kissaki: HTML standar tidak memerlukan tag tubuh sama sekali!

Robert Siemer

5

xhtml1 menspesifikasikan <!ELEMENT html (head, body)>[1] - dan html401 menspesifikasikan <!ELEMENT HTML O O (%html.content;)dengan <!ENTITY % html.content "HEAD, BODY">serta [2]. html51 menyatakan A head element followed by a body element.untuk konten html juga. [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 - Jadi saya kira semua standar HTML yang umum / digunakan memang membutuhkan tag tubuh. :)

Kissaki

1

@ Kissaki itu XHTML, bukan HTML. HTML memungkinkan penghapusan tag dari tag awal dan akhir tubuh, serta penghapusan tag html dan kepala, sesuai dengan SGML DTD-nya. w3.org/TR/html401/struct/global.html#edef-BODY Start tag: optional, End tag: optional

OdraEncoded

1

@Kissaki: html5 tidak memerlukan jenis skrip lagi (jika javascript), Anda tepat untuk versi sebelumnya.

Markus

10

Saya lebih suka, secara umum, untuk tidak menggunakan <body onload=""acara. Saya pikir lebih bersih untuk menjaga perilaku dipisahkan dari konten sebanyak mungkin.

Yang mengatakan, ada beberapa kesempatan (biasanya sangat jarang bagi saya) di mana menggunakan body onload dapat memberikan sedikit peningkatan kecepatan.

Saya suka menggunakan Prototipe jadi saya biasanya meletakkan sesuatu seperti ini di <head> halaman saya:

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

atau

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

Di atas adalah trik yang saya pelajari di sini . Saya sangat menyukai konsep attach event handler di luar HTML.

(Edit untuk memperbaiki kesalahan ejaan dalam kode.)

Mark Biek
sumber

Dalam kesempatan apa akan lebih cepat, dan mengapa?

Kissaki

Jawaban ini tampaknya sangat subyektif dengan semua "Aku" ("Aku lebih suka", "Aku pikir"). Bahwa jika lebih lanjut tidak memiliki fakta obyektif dan dapat diverifikasi cukup banyak mendukung kesan itu.

Kissaki

1

Saya akan mengambil jawaban ini dengan sebutir garam mengingat itu diposting lebih dari 6 tahun yang lalu. Anda dipersilakan untuk memperbaruinya atau mengirim jawaban Anda sendiri yang lebih baik.

Mark Biek

7

'begitu banyak jawaban subyektif untuk pertanyaan objektif. "Tidak mengganggu" JavaScript adalah takhyul seperti aturan lama untuk tidak pernah menggunakan gotos. Tulis kode dengan cara yang membantu Anda mencapai tujuan dengan andal, tidak sesuai dengan keyakinan agama seseorang yang trendi.

Siapa pun yang menemukan:

 <body onload="body_onload();">

terlalu mengganggu adalah terlalu sok dan tidak memprioritaskan prioritas mereka.

Saya biasanya meletakkan kode JavaScript saya di file .js yang terpisah, tapi saya tidak menemukan kesulitan dalam mengaitkan event handler dalam HTML, yang merupakan HTML yang valid.

sumber

39

Ada alasan bagus untuk menulis javascript yang tidak mencolok. Katakanlah Anda memiliki aplikasi web dengan 100 halaman dan Anda menggunakan metode <body onload = "body_onload ();"> alih-alih meletakkannya di file javascript yang disertakan oleh setiap halaman. Lalu bayangkan Anda perlu mengubah nama fungsi itu untuk beberapa alasan. Menempatkan peristiwa dalam file javascript yang disertakan 1) membuat perubahan jauh lebih sederhana, dan 2) menghemat sumber daya server karena file javascript dapat di-cache selama satu tahun (pada server yang dikonfigurasi dengan benar) alih-alih mengunduh kode yang sama berulang-ulang.

Andrew Ensley

21

Jadi karena Anda tidak repot-repot mempelajari mengapa sesuatu disarankan, Anda memberi label rekomendasi "kepercayaan agama yang trendi" ??

hallvors

6

Pertanyaannya adalah "apa perbedaan antara kedua metode ini?", Bersama dengan permintaan untuk rekomendasi yang lebih baik. Bagaimana tanggapan Anda menjawab pertanyaan itu?

Richard Turner

1

Situasi apa pun di mana Anda membuat solusi modular di 1 tempat yang dapat diterapkan ke banyak file jauh lebih baik daripada menambahkan kode ke masing-masing massa file itu sendiri. Lebih baik untuk waktu pembuatan awal, kode tujuan organisasi, untuk keterbacaan, dan untuk pengeditan masa depan. Ini tidak trendi, itu sebenarnya konsep yang lebih tua yang hadir dalam bahasa seperti java dan c ++ yang sekarang diprogram oleh programmer web sebagai cara yang jauh lebih baik untuk kode.

Jimbo Jonny

1

Salah satu pertahanan yang baik terhadap serangan XSS di browser modern adalah menonaktifkan semua javascript sebaris dengan Kebijakan Keamanan Konten Anda. Itu alasan yang cukup bagus untuk tidak menggunakan atribut onload di HTML Anda.

Greg Ball

4

window.onload- Dipanggil setelah semua DOM, file JS, Gambar, Iframe, Ekstensi, dan lainnya telah dimuat sepenuhnya. Ini sama dengan $ (window) .load (function () {});

body onload=""- Disebut sekali DOM dimuat. Ini sama dengan $ (dokumen). Sudah (fungsi () {});

Yesu Raj
sumber

1

Apakah seseorang dapat sumber ini? Saya telah melihat pernyataan ini di banyak forum tetapi tidak pernah dengan tautan ke tempat yang ditentukan dalam spesifikasi.

crempp

1

@ crempp Ada elemen Tubuh dan atribut Global , jadi saya akan mengatakan ini tidak benar. Tetapi Anda dapat mengujinya sendiri, lihat jsbin.com/OmiViPAJ/1/edit . Di sana, Anda dapat melihat acara onload gambar dipecat sebelum acara onload tubuh.

Olaf Dietsche

2

Jawaban ini bertentangan dengan yang lain; dapatkah Anda memberikan sumber?

Jimmy Breck-McKye

2

api.jquery.com/ready Dokumen jQuery mengatakan: "Metode .ready () umumnya tidak kompatibel dengan atribut <body onload =" ">." Saya pikir di jQuery lebih dekat dengan body.onload $ (window) .load (..) tapi saya pikir mereka masih berbeda.

ccsakuweb

2

Jawaban ini sepenuhnya salah dan seharusnya tidak memiliki suara. Sebenarnya jenis jawaban ini umumnya disebut sebagai salah satu kesalahpahaman terbesar tentang peristiwa readyvs. kebakaran setelah seluruh dokumen dimuat termasuk semua skrip, gambar, dan stylesheet. kebakaran setelah pohon DOM telah dibangun tetapi sebelum gambar dll. Yang memiliki kesetaraan , bukan . onloadloadDOMContentLoadedDOMContentLoadeddocument.readyload

rism

2

Tidak ada perbedaan ...

Jadi pada prinsipnya Anda bisa menggunakan keduanya (satu per satu! -)

Tapi demi keterbacaan dan kebersihan html-code, saya selalu lebih suka window.onload! O]

roenving
sumber

1

Jika Anda mencoba menulis kode JS yang tidak mencolok (dan seharusnya), maka Anda tidak boleh menggunakannya <body onload="">.

Ini adalah pemahaman saya bahwa browser yang berbeda menangani keduanya sedikit berbeda tetapi mereka beroperasi dengan cara yang sama. Di sebagian besar browser, jika Anda menentukan keduanya, satu akan diabaikan.

Bob
sumber

1

Pikirkan onload seperti atribut lainnya. Pada kotak input, misalnya, Anda dapat meletakkan:

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

Atau Anda bisa menelepon:

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

Atribut onload bekerja dengan cara yang sama, kecuali bahwa itu mengambil fungsi sebagai nilainya, bukan string seperti atribut nilai. Itu juga menjelaskan mengapa Anda dapat "hanya menggunakan salah satu dari mereka" - memanggil window.onload menetapkan ulang nilai atribut onload untuk tag tubuh.

Juga, seperti yang dikatakan orang lain, biasanya lebih bersih untuk menjaga gaya dan javascript dipisahkan dari konten halaman, itulah sebabnya kebanyakan orang menyarankan untuk menggunakan window.onload atau seperti fungsi siap jQuery.

Soldarnal
sumber

1

<body onload = ""> harus mengganti window.onload.

Dengan <body onload = "">, document.body.onload mungkin nol, tidak terdefinisi atau fungsi tergantung pada browser (meskipun getAttribute ("onload") harus agak konsisten untuk mendapatkan tubuh dari fungsi anonim sebagai string) . Dengan window.onload, ketika Anda menetapkan fungsi padanya, window.onload akan menjadi fungsi yang konsisten di seluruh browser. Jika itu penting bagi Anda, gunakan window.onload.

window.onload lebih baik untuk memisahkan JS dari konten Anda. Tidak ada banyak alasan untuk tetap menggunakan <body onload = ""> saat Anda dapat menggunakan window.onload.

Di Opera, target acara untuk window.onload dan <body onload = ""> (dan bahkan window.addEventListener ("load", func, false)) akan menjadi jendela alih-alih dokumen seperti di Safari dan Firefox. Tapi, 'ini' akan menjadi jendela melintasi browser.

Apa artinya ini adalah bahwa, ketika itu penting, Anda harus membungkus mentah-mentah dan membuat hal-hal yang konsisten atau menggunakan perpustakaan yang melakukannya untuk Anda.

Shadow2531
sumber

0

Mereka berdua bekerja sama. Namun, perhatikan bahwa jika keduanya didefinisikan, hanya satu yang akan dipanggil. Saya biasanya menghindari menggunakan salah satu dari mereka secara langsung. Sebagai gantinya, Anda dapat melampirkan pengendali acara ke acara memuat. Dengan cara ini Anda dapat memasukkan paket JS lainnya dengan lebih mudah yang mungkin juga perlu melampirkan panggilan balik ke acara onload.

Kerangka kerja JS apa pun akan memiliki metode lintas peramban untuk penangan acara.

KernelM
sumber

0

Merupakan standar yang diterima untuk memisahkan konten, tata letak, dan perilaku. Jadi window.onload () akan lebih cocok untuk digunakan daripada <body onload="">keduanya melakukan pekerjaan yang sama.

Rajeshwaran SP
sumber

0

Maaf untuk reinkarnasi dari utas ini lagi setelah 3 tahun tidur, tapi mungkin saya akhirnya menemukan manfaat window.onload=fn1;lebih dari yang tak terbantahkan <body onload="fn1()">. Ini menyangkut modul JS atau modul ES : ketika onloadpawang Anda berada di file JS "klasik" (yaitu dirujuk tanpa <script type="module" … >, cara mana pun mungkin; ketika onloadpawang Anda berada di file JS "modul" (yaitu dirujuk dengan <script type="module" … >, <body onload="fn1()">akan gagal dengan "fn1 () tidak didefinisikan "kesalahan. Alasannya mungkin adalah bahwa modul ES tidak dimuat sebelum HTML diuraikan ... tapi itu hanya dugaan saya. Bagaimanapun, window.onload=fn1;bekerja dengan modul ...

Petr Pivonka
sumber

window.onload vs <body onload = "" />

Jawaban: