Jawaban:
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.
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.
thismerujuk jika diinginkan.
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.
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>
<!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. :)
Start tag: optional, End tag: optional
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.)
'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.
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 () {});
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
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.
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.
<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.
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.
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.
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 ...