Bagaimana cara memanggil fungsi JavaScript pada halaman beban?

Secara tradisional, untuk memanggil fungsi JavaScript setelah halaman telah dimuat, anda'd menambahkan onload atribut untuk tubuh mengandung sedikit JavaScript (biasanya hanya memanggil fungsi)

<body onload="foo()">

Ketika halaman telah dimuat, saya ingin menjalankan beberapa kode JavaScript untuk secara dinamis mengisi bagian-bagian dari halaman dengan data dari server. Saya dapat't menggunakan onload atribut sejak saya'm menggunakan JSP fragmen, yang tidak memiliki tubuh elemen yang dapat saya tambahkan atribut.

Apakah ada cara lain untuk memanggil fungsi JavaScript pada beban? I'd agak tidak menggunakan jQuery seperti yang saya'm tidak sangat akrab dengan itu.

Kamil Kiełczewski
Pertanyaan edit 8 April 2019 в 7:51
Pemrograman
javascript onload
1 Oktober 2010 в 7:57
80 tayangan
Mengomentari pertanyaan (2)
Larutan

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

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

Ini mengikat onload untuk fungsi anonim, bahwa ketika dipanggil, akan menjalankan fungsi yang anda inginkan, dengan parameter apapun yang anda berikan. Dan, tentu saja, anda dapat menjalankan lebih dari satu fungsi dari dalam fungsi anonim.

WoIIe
Jawaban edit 4 Maret 2014 в 11:12
Komentar (4)

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

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

Penjelasan:

DOMContentLoaded Itu berarti ketika DOM benda-Benda dari dokumen yang terisi penuh dan dilihat oleh JavaScript, juga ini bisa menjadi "klik", "fokus"...

fungsi() fungsi Anonim, akan dipanggil ketika peristiwa terjadi.

Komentar (1)

Asli anda pertanyaan jelas, dengan asumsi Kevin's edit/penafsiran ini benar, maka ini pertama pilihan doesn't berlaku

Pilihan yang khas adalah menggunakan onload acara:


....

Anda juga dapat menempatkan javascript di akhir dari tubuh; tidak't mulai menjalankan sampai dokter selesai.


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

Dan, opsi lain, adalah untuk mempertimbangkan menggunakan JS framework yang secara intrinsik tidak ini:

// jQuery
$(document).ready( function () {
  SomeFunction();
});
james.garriss
Jawaban edit 5 September 2017 в 6:38
Komentar (3)
function yourfunction() { /* do stuff on page load */ }

window.onload = yourfunction;

Atau dengan jQuery jika anda ingin:

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

Jika anda ingin menelepon lebih dari satu pada fungsi beban halaman, lihat artikel ini untuk informasi lebih lanjut:

Philipp
Jawaban edit 20 Mei 2015 в 11:22
Komentar (5)

Anda harus memanggil fungsi yang anda ingin menjadi yang disebut pada beban (yaitu, beban dokumen/halaman). Sebagai contoh, fungsi yang ingin anda load ketika dokumen atau halaman yang memuat disebut "yourFunction". Hal ini dapat dilakukan dengan memanggil fungsi pada acara buka dokumen. Silahkan 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
Jawaban edit 14 Februari 2019 в 4:32
Komentar (0)

di sini's trik (bekerja di mana-mana):

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



        Test
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <script type="text/javascript">
        function codeAddress() {
            alert('ok');
        }
        window.onload = codeAddress;
        </script>
Komentar (2)

Untuk mendeteksi dimuat html (dari server) dimasukkan ke DOM menggunakan MutationObserver atau mendeteksi saat anda loadContent fungsi ketika data yang siap untuk digunakan

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>
Kamil Kiełczewski
Jawaban edit 31 Juli 2019 в 5:25
Komentar (0)