Bagaimana cara saya memanggil fungsi JavaScript pada pemuatan halaman?

244

Secara tradisional, untuk memanggil fungsi JavaScript setelah halaman dimuat, Anda akan menambahkan onloadatribut ke tubuh yang berisi sedikit JavaScript (biasanya hanya memanggil fungsi)

<body onload="foo()">

Ketika halaman telah dimuat, saya ingin menjalankan beberapa kode JavaScript untuk mengisi bagian halaman secara dinamis dengan data dari server. Saya tidak dapat menggunakan onloadatribut karena saya menggunakan fragmen JSP, yang tidak memiliki bodyelemen saya dapat menambahkan atribut.

Apakah ada cara lain untuk memanggil fungsi JavaScript saat dimuat? Saya lebih suka tidak menggunakan jQuery karena saya tidak terlalu terbiasa dengannya.

javascript onload

— palAlaa
sumber

15

btw: ini Javascript; Java menjadi bahasa dan Javascript lainnya. Tidak ada yang namanya skrip Java. FYI

— Yanick Rochon

Bisakah Anda memverifikasi bahwa suntingan Kevin untuk pertanyaan Anda masih menanyakan pertanyaan yang sama, atau ulangi untuk memastikan kami mengerti? (Apakah Anda mencoba mencari alternatif untuk memuat?)

— STW

388

Jika Anda ingin metode onload mengambil parameter, Anda dapat melakukan sesuatu yang mirip dengan ini:

window.onload = function() {
  yourFunction(param1, param2);
};

Ini mengikat onload ke fungsi anonim, yang ketika dipanggil, akan menjalankan fungsi yang Anda inginkan, dengan parameter apa pun yang Anda berikan. Dan, tentu saja, Anda dapat menjalankan lebih dari satu fungsi dari dalam fungsi anonim.

— Matt Sieker
sumber

Dan sekarang ketika saya secara dinamis menyertakan halaman yang dihasilkan server dan membutuhkan kesiapan DOM, saya harus bekerja melalui ladang ranjau ini. Kalau saja seseorang akan mendorong pengguna perpustakaan dengan benar sebelumnya.

— Stefan Kendall

4

Saya tidak mengatakan itu ide yang bagus. Meskipun pengembang utama tempat saya bekerja memiliki kasus yang kuat yaitu sindrom Not Invented Here, dan saya belum dapat meyakinkannya untuk menggunakan jquery, di luar beberapa halaman.

— Matt Sieker

2

Maka mungkin Anda harus beralih pekerjaan. Jika alat yang tepat untuk pekerjaan itu bukan alat yang Anda gunakan, mengapa memukul kepala Anda terus-menerus melawan yang tidak kompeten?

— Stefan Kendall

Dan bisakah saya memanggil fungsi Anda yang sama untuk kedua kalinya menggunakan tombol onclick event on?

— Faizan

73

Cara lain untuk melakukan ini adalah dengan menggunakan pendengar acara, berikut cara Anda menggunakannya:

document.addEventListener("DOMContentLoaded", function() {
  you_function(...);
});

Penjelasan:

DOMContentLoaded Berarti ketika Objek DOM dokumen dimuat penuh dan dilihat oleh JavaScript, juga ini bisa jadi "klik", "fokus" ...

function () Fungsi anonim, akan dipanggil ketika acara terjadi.

— Ahmed Jolani
sumber

5

Perhatikan bahwa ini tidak akan berfungsi di IE 8 dan lebih rendah. Kalau tidak, ini adalah solusi JS murni terbaik!

— Philipp

46

Pertanyaan awal Anda tidak jelas, dengan asumsi edit / interpretasi Kevin benar maka opsi pertama ini tidak berlaku

Opsi khas menggunakan onloadacara:

<body onload="javascript:SomeFunction()">
....

Anda juga dapat menempatkan javascript di bagian paling akhir dari tubuh; itu tidak akan mulai dijalankan sampai dokumen selesai.

<body>
  ...
  <script type="text/javascript">
    SomeFunction();
  </script>
</body>

Dan, opsi lain, adalah mempertimbangkan menggunakan kerangka kerja JS yang secara intrinsik melakukan ini:

// jQuery
$(document).ready( function () {
  SomeFunction();
});

— STW
sumber

The javascript:dalam onloadtidak perlu, meskipun tidak berbahaya.

— icktoofay

@STW <script type="text/javascript">LoadResult();</script>memberiUncaught ReferenceError: LoadResult is not defined

— Gunasegar

37

function yourfunction() { /* do stuff on page load */ }

window.onload = yourfunction;

Atau dengan jQuery jika Anda ingin:

$(function(){
   yourfunction();
});

Jika Anda ingin memanggil lebih dari satu fungsi pada pemuatan halaman, lihat artikel ini untuk informasi lebih lanjut:

Menggunakan Beberapa Fungsi JavaScript Onload

— Sarfraz
sumber

3

Ini tidak benar, fungsi akan menjalankan dan menetapkan apa pun yang dikembalikan ke beban. () Seharusnya tidak ada di sana.

— epascarello

1

Jika ada fungsi-fungsi lain yang mendengarkan acara onload ini akan membuat mereka hilang. Lebih baik menambahkan pendengar acara daripada menetapkan penangan acara secara langsung. Bahkan dalam kasus ini Anda akan menetapkannya sebagai `window.onload = fungsi Anda 'tanpa penutupan fungsi, bukan seperti yang Anda miliki. Cara Anda berupaya menjalankan fungsi Anda () pada saat penugasan.

— Robusto

yang akan menetapkan nilai kembali fungsi ke window.onload, yang tidak akan berfungsi, kecuali nilai kembali adalah fungsi.

— I.devries

@epascarello: Tangkapan yang bagus, diperbaiki, Anda melihat kebiasaan ketika menulis nama fungsi. Terima kasih

— Sarfraz

1

window.onload = fungsi Anda; Masalah dengan cara ini adalah ia tidak dapat menerima parameter fucntion !!

— palAlaa

8

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

— anonim
sumber

3

Saya pikir jawabannya jelas, karena Anda dapat melihat skrip diletakkan di kepala tag sehingga memungkinkan untuk dieksekusi sebelum isi tubuh .. atau katakanlah preload fungsinya atau apa pun .. kadang-kadang seseorang mengajukan pertanyaan karena dia tidak Saya tidak tahu sama sekali, tetapi tidak pernah ada kasus di mana seseorang akan memberi makan Anda, atau siapa pun di komunitas ini akan, Anda harus mencari sendiri sedikit lebih banyak. #

— utama_that_you're_a_web_developer

8

Anda harus memanggil fungsi yang Anda inginkan dipanggil pada beban (yaitu, memuat dokumen / halaman). Misalnya, fungsi yang ingin Anda muat ketika dokumen atau pemuatan halaman disebut "fungsi Anda". Ini dapat dilakukan dengan memanggil fungsi saat memuat dokumen. Silakan lihat kode di bawah ini untuk lebih detail.

Coba kode di bawah ini:

<script src="js/jquery-1.11.0.min.js" type="text/javascript"></script>
<script type="text/javascript">

    $(document).ready(function () {
        yourFunction();
    });
    function yourFunction(){
      //some code
    }
</script>

— Amir Md Amiruzzaman
sumber

6

inilah triknya (bekerja di mana-mana):

r(function(){
alert('DOM Ready!');
});
function r(f){/in/.test(document.readyState)?setTimeout('r('+f+')',9):f()}

— Abhishek
sumber

1

Untuk mendeteksi html yang dimuat (dari server) dimasukkan ke dalam penggunaan DOM MutationObserveratau mendeteksi momen di fungsi loadContent Anda ketika data siap digunakan

Tampilkan cuplikan kode

let ignoreFirstChange = 0;
let observer = (new MutationObserver((m, ob)=>
{
  if(ignoreFirstChange++ > 0) console.log('Element added on', new Date());
}
)).observe(content, {childList: true, subtree:true });


// TEST: simulate element loading
let tmp=1;
function loadContent(name) {  
  setTimeout(()=>{
    console.log(`Element ${name} loaded`)
    content.innerHTML += `<div>My name is ${name}</div>`; 
  },1500*tmp++)
}; 

loadContent('Senna');
loadContent('Anna');
loadContent('John');

<div id="content"><div>

Luaskan cuplikan

— Kamil Kiełczewski
sumber