2013-05-25 20 views
6

Więc wiem, że jeśli używasz jQuery, możesz użyć $(document).load(function(){});, aby dowolny kod wpisany do funkcji został wykonany po załadowaniu całej strony, ale czy istnieje sposób na zrobienie czegoś podobnego jeśli nie używasz jQuery i używasz JS?Wykonywanie JS przy ładowaniu strony bez użycia jQuery

Na przykład ...

<html> 
    <head> 
     <script type="text/javascript"> 
      var box = document.getElementById('box'); 
      alert(box); 
     </script> 
    </head> 
    <body> 
     <div id="box" style="width:200px; height:200px; background-color:#999; 
margin:20px;"></div> 
    </body> 
</html> 

Gdybym użyć tej metody alert po prostu mówi null. Czy istnieje sposób na uruchomienie kodu js po załadowaniu strony?

+0

Właściwie, jeśli używasz jQuery, proszę ** nie używaj '$ (document) .load (function() {...});' – adeneo

+0

To pytanie może zawierać odpowiedź, której potrzebujesz [http: // /stackoverflow.com/questions/799981...](http://stackoverflow.com/questions/799981/document-ready-equivalent-without-jquery) – Tifa

Odpowiedz

13

używam:

<script type="text/javascript"> 
    window.onload = function(){ 
     //do stuff here 
    }; 
</script> 

W ten sposób nie trzeba używać żadnych tagów onload w html.

+0

Podoba mi się sposób, 1 odpowiedź nadchodzi, kiedy pozwala mi. – user1563944

8

Najprostszym sposobem jest po prostu umieścić swój skrypt na końcu dokumentu, zazwyczaj tuż przed znacznika body zamykania:

<html> 
<head> 

</head> 
<body> 
<div id="box" style="width:200px; height:200px; background-color:#999; margin:20px;"></div> 
<script type="text/javascript"> 
    var box = document.getElementById('box'); 
    alert(box); 
</script> 
</body> 

</html> 
+0

więc pobierz js, aby znaleźć element #box, który mają znaczniki js przejść do sekcji ciała, a nie do tagu głowy? – user1563944

+0

@ user1563944 - dokładniej, javascript musi pochodzić po elemencie, do którego próbujesz uzyskać dostęp, w przeciwnym razie element nie istnieje po wykonaniu javascript. – adeneo

2

Można użyć onload w tagu ciała.

<head> 
    <script type="text/javascript"> 
     function doSomething() { 
     //your code here 
     } 
    </script> 
</head> 
<body onload="doSomething()"> 
+0

dlaczego głosowanie w dół? – Robbert

4

Do tego celu można użyć różnych metod.

Najprostszym, najłatwiejszym sposobem byłoby po prostu dodać tag skryptu na końcu tagu ciała:

<html> 
<head> 
    <title> Example </title> 
</head> 
<body> 
    <div> 
     <p>Hello</p> 
    </div> 
    <script type="text/javascript"> 
     // Do stuff here 
    </script> 
</body> 
</html> 

Sposób jQuery robi to jest coś podobnego do:

window.onload = function() { 
    // Do stuff here 
} 

I zwykle po prostu zrób to w drugą stronę, na wszelki wypadek.

Aby zapewnić zgodność z różnymi przeglądarkami, przeszukaj źródło jQuery i znajdź to, czego używają.

Powiązane problemy