Bagaimana menjalankan suatu fungsi saat halaman dimuat?

246

Saya ingin menjalankan fungsi ketika halaman dimuat, tetapi saya tidak ingin menggunakannya dalam <body>tag.

Saya memiliki skrip yang berjalan jika saya inisialisasi dalam <body>, seperti ini:

function codeAddress() {
  // code
}

<body onLoad="codeAddress()">

Tetapi saya ingin menjalankannya tanpa <body onload="codeAddress()">dan saya telah mencoba banyak hal, misalnya ini:

window.onload = codeAddress;

Tapi itu tidak berhasil.

Jadi, bagaimana saya menjalankannya ketika halaman dimuat?

javascript html onload

— Claes Gustavsson
sumber

Apakah Anda menjalankan window.onload = codeAddresssetelah codeAddress()didefinisikan? Jika demikian, ini akan berhasil. Apakah Anda yakin tidak ada kesalahan di tempat lain?

— Skilldrick

Ini tidak masuk akal. window.onload berjalan setelah pemuatan halaman dan semua javascript tersedia, sehingga fungsi codeAddress () dapat dideklarasikan di mana saja di dalam halaman atau file js yang ditautkan. Itu tidak harus datang sebelum kecuali dipanggil saat memuat halaman itu sendiri.

— Jared Farrish

@ Jared Ya itu. Lihatlah jsfiddle.net/HZHmc . Itu tidak bekerja. Tetapi jika Anda memindahkan window.onload ke setelah definisi: jsfiddle.net/HZHmc/1 itu berfungsi.

— Skilldrick

Deklarasi fungsi umumnya diangkat ke atas lingkup, sehingga fungsi tersebut dapat dideklarasikan di mana saja dalam cakupan yang dapat diakses.

— Russ Cam

4

semua browser populer dapat menampilkan kesalahan javascript - apakah Anda mendapatkannya?

— Christoph

354

window.onload = codeAddress;harus berfungsi - ini demo , dan kode lengkap:

<!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>

Luaskan cuplikan

<!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');
        }
        
        </script>
    </head>
    <body onload="codeAddress();">
    
    </body>
</html>

Luaskan cuplikan

— Darin Dimitrov
sumber

3

Seperti yang saya katakan dalam jawaban saya, tidak ada yang salah dengan kode seperti yang terlihat - alasan itu tidak berfungsi pasti ada kesalahan di JS di suatu tempat.

— Skilldrick

jika Anda meletakkan paragraf dengan teks di badan, itu tidak akan memuat sampai Anda mengklik ok.

— FluorescentGreen5

Penangan event global ini hanya tersedia di Chrome. developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/…

— Devappended

177

Daripada menggunakan jQuery atau window.onload, JavaScript asli telah mengadopsi beberapa fungsi hebat sejak rilis jQuery. Semua browser modern sekarang memiliki fungsi siap DOM sendiri tanpa menggunakan perpustakaan jQuery.

Saya akan merekomendasikan ini jika Anda menggunakan Javascript asli.

document.addEventListener('DOMContentLoaded', function() {
    alert("Ready!");
}, false);

— Spencer May
sumber

4

(pertanyaan noob: apa fungsinya false?)

— ᔕᖺᘎᕊ

7

@ ᔕᖺᘎᕊ untuk properti 'gelembung' (yang tidak harus Anda sertakan, saya hanya mengisi semua boolean untuk kebiasaan baik). Ada juga pernyataan boolean lain untuk properti yang 'dapat dibatalkan', tetapi itu tidak terlalu berguna karena pernyataan di atas sudah tidak dapat dibatalkan. Baca lebih lanjut di sini: developer.mozilla.org/en-US/docs/Web/Events/DOMContentLoaded

— Spencer

1

Inilah yang saya cari sekarang :) Menjalankan ketika DOM selesai, sehingga Anda dapat memanipulasinya, bukan ketika browser mengatakan "halaman sepenuhnya dimuat", yang mungkin memakan waktu beberapa detik, berdasarkan pada hal-hal eksternal (seperti iklan)

— Nathanyel

Pertanyaan noob sedikit, bagaimana jika Anda tidak tahu apakah halaman dimuat atau tidak? Sunting: Ah: document.readyState

— Brian Hannay

1

@ x-yuri "Acara DOMContentLoaded dipecat ketika dokumen telah dimuat dan diuraikan sepenuhnya, tanpa menunggu stylesheet, gambar, dan subframe selesai dimuat (peristiwa pemuatan dapat digunakan untuk mendeteksi halaman yang dimuat penuh)." - stackoverflow.com/questions/2414750/…

— Spencer

46

Mengambil jawaban Darwin tetapi gaya jQuery. (Saya tahu pengguna meminta javascript).

berlari biola

$(document).ready ( function(){
   alert('ok');
});

— Makanlah di Joes
sumber

4

Jawaban Anda mengajari saya membagikan, tetapi bukan tentang jQuery / javascript.

— unicorn2

2

@ VijayKumar ini jQuery, bukan Javascript asli sehingga Anda memerlukan pustaka jQuery yang disertakan agar bisa berfungsi

— Spencer

30

Solusi alternatif. Saya lebih suka ini untuk kesederhanaan dan kesederhanaan kode.

(function () {
    alert("I am here");
})();

Ini adalah fungsi anonim, di mana namanya tidak ditentukan. Apa yang terjadi di sini adalah bahwa, fungsi didefinisikan dan dieksekusi bersama. Tambahkan ini ke awal atau akhir tubuh, tergantung pada apakah itu akan dieksekusi sebelum memuat halaman atau segera setelah semua elemen HTML dimuat.

— Habeeb
sumber

1

Ini adalah satu-satunya kode yang berfungsi dengan Pratinjau HTML untuk GitHub: htmlpreview.github.io Kode lain, meskipun benar, dirusak oleh Pratinjau HTML ini.

— Jason Doucette

1

Adakah yang bisa menjelaskan perbedaan dari meletakkan tag script di akhir halaman HTML dan tujuan dari fungsi anonim?

— Pat-Laugh

10

window.onload = function() { ... dll. bukan jawaban yang bagus.

Ini mungkin akan berhasil, tetapi itu juga akan merusak fungsi lain yang sudah terhubung ke acara itu. Atau, jika fungsi lain terhubung ke acara itu setelah Anda, itu akan merusak Anda. Jadi, Anda dapat menghabiskan berjam-jam kemudian mencoba mencari tahu mengapa sesuatu yang berfungsi tidak lagi.

Jawaban yang lebih kuat di sini:

if(window.attachEvent) {
    window.attachEvent('onload', yourFunctionName);
} else {
    if(window.onload) {
        var curronload = window.onload;
        var newonload = function(evt) {
            curronload(evt);
            yourFunctionName(evt);
        };
        window.onload = newonload;
    } else {
        window.onload = yourFunctionName;
    }
}

Beberapa kode yang saya gunakan, saya lupa di mana saya menemukannya untuk memberikan penghargaan kepada penulis.

function my_function() {
    // whatever code I want to run after page load
}
if (window.attachEvent) {window.attachEvent('onload', my_function);}
else if (window.addEventListener) {window.addEventListener('load', my_function, false);}
else {document.addEventListener('load', my_function, false);}

Semoga ini membantu :)

— Akan
sumber

terima kasih telah memberikan wawasan tambahan tentang onloadpenggunaan

— CybeX

4

Coba bacaystatechange

document.addEventListener('readystatechange', () => {    
  if (document.readyState == 'complete') codeAddress();
});

di mana negara adalah:

memuat - dokumen dimuat (tidak dipecat dalam cuplikan)
interaktif - dokumen diuraikan, dipecat sebelumnyaDOMContentLoaded
selesai - dokumen dan sumber daya dimuat, dipecat sebelumnyawindow.onload

Tampilkan cuplikan kode

<script>
  document.addEventListener("DOMContentLoaded", () => {
    mydiv.innerHTML += `DOMContentLoaded (timestamp: ${Date.now()})</br>`;
  });
  
  window.onload = () => {
    mydiv.innerHTML += `window.onload (timestamp: ${Date.now()}) </br>` ;
  } ;

  document.addEventListener('readystatechange', () => {
    mydiv.innerHTML += `ReadyState: ${document.readyState}  (timestamp: ${Date.now()})</br>`;
    
    if (document.readyState == 'complete') codeAddress();
  });

  function codeAddress() {
    mydiv.style.color = 'red';
  }
</script>

<div id='mydiv'></div>

Luaskan cuplikan

— Kamil Kiełczewski
sumber

3

Lihatlah skrip domReady yang memungkinkan pengaturan beberapa fungsi untuk dieksekusi ketika DOM telah dimuat. Ini pada dasarnya apa yang Dom siap lakukan di banyak perpustakaan JavaScript populer, tetapi ringan dan dapat diambil dan ditambahkan pada awal file skrip eksternal Anda.

Contoh penggunaan

// add reference to domReady script or place 
// contents of script before here

function codeAddress() {

}

domReady(codeAddress);

— Russ Cam
sumber

0

window.onload akan berfungsi seperti ini:

function codeAddress() {
	document.getElementById("test").innerHTML=Date();
}
window.onload = codeAddress;

<!DOCTYPE html>
<html>
<head>
	<title>learning java script</title>
	<script src="custom.js"></script>
</head>
<body>
	<p id="test"></p>
	<li>abcd</li>
</body>
</html>

Luaskan cuplikan

— Rudra
sumber