Sayfa yüklenirken bir JavaScript işlevini nasıl çağırırım?

244

Geleneksel olarak, sayfa yüklendikten sonra bir JavaScript işlevini çağırmak onloadiçin, gövdeye biraz JavaScript içeren bir özellik eklersiniz (genellikle yalnızca bir işlevi çağırır)

<body onload="foo()">

Sayfa yüklendiğinde, sayfanın bölümlerini sunucudaki verilerle dinamik olarak doldurmak için bazı JavaScript kodları çalıştırmak istiyorum. onloadÖznitelik kullanamıyorum çünkü ben bodybir öznitelik ekleyebilirsiniz öğe yok JSP parçaları, kullanıyorum .

Yüklemede bir JavaScript işlevini çağırmanın başka bir yolu var mı? Çok aşina olmadığım için jQuery kullanmak istemem.

javascript onload

— palAlaa
kaynak

15

btw: Javascript; Java bir dil ve Javascript başka bir dil. Java betiği diye bir şey yoktur. FYI

— Yanick Rochon

Kevin'in sorunuzdaki düzenlemesinin hala aynı soruyu sorduğunu doğrulayabilir veya anladığımızdan emin olmak için tekrar silebilir misiniz? (Onload'a alternatif bulmaya mı çalışıyorsunuz?)

— STW

388

Onload yönteminin parametre almasını istiyorsanız, buna benzer bir şey yapabilirsiniz:

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

Bu, çağrıldığında, istediğiniz fonksiyonu verdiğiniz parametrelerle çalıştıracak olan anonim bir işleve yüklenir. Ve elbette, anonim işlevin içinden birden fazla işlevi çalıştırabilirsiniz.

— Matt Sieker
kaynak

Şimdi dinamik olarak sunucu tarafından oluşturulan bir sayfa eklediğimde ve DOM-hazırlığına ihtiyaç duyduğumda, bu mayın tarlasında çalışmam gerekiyor. Sadece bir kişi daha önce kütüphane kullanıcısını düzgün bir şekilde teşvik etseydi.

— Stefan Kendall

4

Bunun iyi bir fikir olduğunu söylemedim. Çalıştığım potansiyel geliştirici güçlü bir Not Invented Here sendromu vakasına sahip olsa da, onu birkaç sayfanın dışında jquery kullanmaya ikna edemedim.

— Matt Sieker

2

O zaman belki de iş değiştirmelisin. Eğer iş için doğru araç kullandığınız araç değilse, neden beceriksizlerle sürekli mücadele ederek başınızı duvara dayayın?

— Stefan Kendall

Düğmedeki onclick olayını kullanarak aynı işlevinizi ikinci kez çağırabilir miyim?

— Faizan

73

Bunu yapmanın başka bir yolu da olay dinleyicilerini kullanmaktır.

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

Açıklama:

DOMContentLoaded Belgenin DOM Nesneleri tam olarak yüklendiğinde ve JavaScript tarafından görüntülendiğinde, bu da "tıklama", "odaklama" olabilir ...

function () Anonim işlev, olay meydana geldiğinde çağrılır.

— Ahmed Jolani
kaynak

5

Bunun IE 8 ve daha düşük sürümlerde çalışmayacağını unutmayın. Aksi takdirde bu en iyi saf JS çözümüdür!

— Philipp

46

Kevin'in düzenleme / yorumlamanın doğru olduğunu varsayarak orijinal sorunuz net değildi, bu durumda bu ilk seçenek geçerli değil

Tipik seçenekler onloadetkinliği kullanıyor :

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

Javascript'inizi vücudun en sonuna da yerleştirebilirsiniz; doküman tamamlanana kadar yürütmeye başlamaz.

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

Ve başka bir seçenek, kendiliğinden bunu yapan bir JS çerçevesi kullanmayı düşünmektir:

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

— STW
kaynak

javascript:İçinde onloadzararlı değildir olsa gereksizdir.

— icktoofay

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

— Gunasegar

37

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

window.onload = yourfunction;

Veya jQuery ile isterseniz:

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

Sayfa yüklemesinde birden fazla işlevi çağırmak istiyorsanız, daha fazla bilgi için bu makaleye göz atın:

Birden Fazla JavaScript Onload İşlevini Kullanma

— Sarfraz
kaynak

3

Bu doğru değil, işlev yürütülür ve yüke geri döndüğü her şeyi atar. () Orada olmamalıdır.

— epascarello

1

Eğer onload olayını dinleyen başka fonksiyonlar varsa, bu onları patlatacaktır. Doğrudan bir olay işleyici atamak yerine bir olay dinleyicisi eklemek daha iyidir. Bu durumda bile, işlevi kapatmadan değil, `` window.onload = yourfunction '' olarak atayabilirsiniz. Yolunuz, atama sırasında işlevinizi () yürütmeyi amaçlar.

— Robusto

işlevin dönüş değerini window.onload öğesine atar; bu, dönüş değeri bir işlev olmadığı sürece çalışmaz.

— I.devries

@epascarello: İyi yakaladın, düzeltildi, fonksiyon adları yazarken bir alışkanlık görüyorsun. Teşekkürler

— Sarfraz

1

window.onload = işleviniz; Bu şekilde sorun fucntion parametresini kabul etmemesidir!

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

Snippet'i genişlet

— anonim
kaynak

3

Bence betiği açıktır, çünkü betiğin kafa etiketine konulduğunu görebilirsiniz, böylece vücut içeriğinden önce yürütülmesine izin verir .. ya da diyelim ki işlevlerini ya da herhangi bir şeyi önceden yüklüyorum .. bazen bir kişi soru soruyor çünkü ' Hiç bilmiyorum, ama hiçbir zaman birisinin sizi besleyeceği veya bu topluluktaki herkesin kendinize biraz daha fazla bakması gerekmiyor. # özellikle_that_you're_a_web_developer

— M03

8

Yüklemede çağrılmasını istediğiniz işlevi çağırmanız gerekir (ör. Belge / sayfanın yüklenmesi). Örneğin, belge veya sayfa yüklendiğinde yüklemek istediğiniz işleve "işleviniz" adı verilir. Bu, belgenin load olayındaki fonksiyon çağrıldığında yapılabilir. Daha fazla ayrıntı için lütfen aşağıdaki koda bakın.

Aşağıdaki kodu deneyin:

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

6

İşte hile (her yerde çalışır):

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

— Abhishek
kaynak

1

DOM kullanımına eklenen yüklü html'yi (sunucudan) MutationObserveralgılamak veya veriler kullanıma hazır olduğunda loadContent işlevinizde anı algılamak için

Kod snippet'ini göster

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>

Snippet'i genişlet

— Kamil Kiełczewski
kaynak