Sayfa yüklendiğinde bir işlev nasıl çalıştırılır?

246

Sayfa yüklendiğinde bir işlev çalıştırmak istiyorum, ancak <body>etiketinde kullanmak istemiyorum .

Ben, eğer böyle bir başlangıç durumunda çalışan bir komut dosyası var <body>:

function codeAddress() {
  // code
}

<body onLoad="codeAddress()">

Ama olmadan çalıştırmak istiyorum <body onload="codeAddress()">ve bir çok şey denedim, örneğin:

window.onload = codeAddress;

Ama bu çalışmıyor.

Peki sayfa yüklendiğinde nasıl çalıştırırım?

javascript html onload

— Claes Gustavsson
kaynak

Tanımlandıktan window.onload = codeAddresssonra koşuyor musunuz codeAddress()? Eğer öyleyse, bu işe yaramalı. Başka bir yerde hata olmadığından emin misiniz?

— Skilldrick

Bu hiç mantıklı değil. window.onload sayfa yüklendikten sonra çalışır ve tüm javascript kullanılabilir, böylece codeAddress () işlevi sayfanın herhangi bir yerinde veya bağlantılı js dosyalarında bildirilebilir. Sayfa yüklemesi sırasında çağrılmadığı sürece daha önce gelmesi gerekmez.

— Jared Farrish

@Jared Evet öyle. Jsfiddle.net/HZHmc adresine bir göz atın . Çalışmıyor. Ancak window.onload öğesini tanımdan sonra taşırsanız : jsfiddle.net/HZHmc/1 işe yarar .

— Skilldrick

Bir işlev bildirimi genellikle kapsamın en üstünde yer alır, bu nedenle işlev erişilebilir bir kapsamda herhangi bir yerde bildirilebilir.

— Russ Cam

4

tüm popüler tarayıcılar javascript hataları görüntüleyebilir - herhangi bir şey alıyor musunuz?

— Christoph

354

window.onload = codeAddress;çalışması gerekir - işte bir demo ve tam kod:

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

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

Snippet'i genişlet

— Darin Dimitrov
kaynak

3

Cevabımda söylediğim gibi, kodda görüldüğü gibi yanlış bir şey yok - çalışmamasının nedeni JS'de bir yerde bir hata olmalıdır.

— Skilldrick

gövdeye metin içeren bir paragraf koyarsanız, Tamam'ı tıklayana kadar yüklenmez.

— FluorescentGreen5

Bu genel olay işleyici yalnızca Chrome'da kullanılabilir. developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/...

— Devappended

177

Yerel JavaScript, jQuery veya window.onload kullanmak yerine, jQuery'nin yayınlanmasından bu yana bazı harika işlevler benimsemiştir. Tüm modern tarayıcılar artık jQuery kütüphanesi kullanmadan kendi DOM hazır fonksiyonuna sahiptir.

Yerel Javascript kullanıyorsanız bunu tavsiye ederim.

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

— Spencer May
kaynak

4

(çaylak soru: ne yapar false?)

— ᔕᖺᘎᕊ

7

@ Bubbles 'kabarcıklar' özelliği için (ki dahil etmek zorunda değilsiniz, ben sadece iyi alışkanlık için tüm booleans doldurun). 'Cancelable' özelliği için başka bir boole ifadesi de vardır, ancak yukarıdaki ifade zaten iptal edilemez olduğundan çok yararlı değildir. Buradan daha fazla bilgi edinebilirsiniz: developer.mozilla.org/en-US/docs/Web/Events/DOMContentLoaded

— Spencer Mayıs

1

Şu anda aradığım şey budur :) DOM tamamlandığında yürütülür, böylece tarayıcı, harici sayfalara (reklamlar gibi) göre birkaç saniye sürebilen "sayfa tamamen yüklendi" dediğinde değil, manipüle edebilirsiniz.

— Nathanyel

Biraz çaylak soru, sayfanın yüklü olup olmadığını bilmiyorsanız ne olur? Düzenle: Ah: document.readyState

— Brian Hannay

1

@ x-yuri "Belge tamamen yüklendiğinde ve ayrıştırıldığında, stil sayfaları, görüntüler ve alt çerçevelerin yüklenmesini beklemeden DOMContentLoaded olayı tetiklenir (load olayı tam yüklü bir sayfayı algılamak için kullanılabilir). - stackoverflow.com/questions/2414750/…

— Spencer Mayıs

46

Darin'in cevabını alarak jQuery tarzı. (Kullanıcı javascript istedi biliyorum).

keman çalmak

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

— Joes'ta yemek yiyin
kaynak

4

Cevabınız bana çok şey öğretti, ama jQuery / javascript hakkında değil.

— unicorn2

2

@VijayKumar bu jQuery, yerli Javascript değil, bu yüzden çalışması için dahil bir jQuery kütüphanesine ihtiyacınız var

— Spencer Mayıs

30

Alternatif çözüm. Bunu kısalık ve kod basitliği için tercih ederim.

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

Bu, adın belirtilmediği anonim bir işlevdir. Burada olan, fonksiyonun birlikte tanımlanması ve yürütülmesi. Sayfayı yüklemeden önce mi yoksa tüm HTML öğeleri yüklendikten hemen sonra mı yürütüleceğine bağlı olarak bunu gövdenin başına veya sonuna ekleyin.

— habeeb
kaynak

1

GitHub için HTML Önizleme ile çalışan tek kod budur: htmlpreview.github.io Diğer kod, doğru olsa da, bu HTML Önizleme tarafından harap olur.

— Jason Doucette

1

Birisi bunun HTML etiketinin sonuna komut dosyası etiketlerini koymak ve anonim işlevin amacını nasıl farklılaştırdığını açıklayabilir mi?

— Pat-Laugh

10

window.onload = function() { ... vb. büyük bir cevap değildir.

Bu muhtemelen işe yarayacaktır, ancak aynı zamanda o etkinliğe bağlanan diğer işlevleri de bozacaktır. Ya da, sizden sonra başka bir işlev o olaya katılırsa, bu olay sizinkini bozacaktır. Bu yüzden, çalışmakta olan bir şeyin neden neden olmadığını anlamaya çalışmak için çok fazla zaman harcayabilirsiniz.

Burada daha sağlam bir cevap :

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;
    }
}

Kullandığım bazı kodlar, yazarın kredisini vermek için bulduğum yeri unuttum.

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);}

Bu yardımcı olur umarım :)

— Niyet
kaynak

teşekkürler içine ek bilgiler sağlamak için onloadkullanımı

— Cybex

4

Readystatechange'ı deneyin

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

eyaletler:

loading - belge yükleniyor (snippet'te tetiklenmedi)
etkileşimli - belge ayrıştırılır, daha önce işlenirDOMContentLoaded
tamamlandı - belge ve kaynaklar yüklenir, daha önce işlenirwindow.onload

Kod snippet'ini göster

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

Snippet'i genişlet

— Kamil Kiełczewski
kaynak

3

DOM yüklendiğinde yürütülecek birden fazla işlev ayarlamaya izin veren domReady komut dosyasına bir göz atın . Temel olarak Dom hazır birçok popüler JavaScript kitaplığında bunu yapar, ancak hafiftir ve harici komut dosyanızın başında alınabilir ve eklenebilir.

Örnek kullanım

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

function codeAddress() {

}

domReady(codeAddress);

— Russ Cam
kaynak

0

window.onload şu şekilde çalışır:

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>

Snippet'i genişlet

— Rudra
kaynak