Vreau să executați o funcție atunci când pagina este încărcată, dar nu vreau să-l folosească în `
tag.Am un script care ruleaza dacă am inițializa în <body>
, astfel:
function codeAddress() {
// code
}
<body onLoad="codeAddress()">
Dar vreau să-l ruleze fără <body onload="codeAddress()">
și am încercat o mulțime de lucruri, de exemplu, acest lucru:
window.onload = codeAddress;
Dar nu este de lucru.
Așa cum am alerga atunci când pagina este încărcată?
fereastră.onload = codeAddress;
ar trebui să funcționeze - [aici's un demo](
<!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>
<!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>
Mai degrabă decât folosind jQuery sau fereastra.onload, nativ JavaScript a adoptat unele funcții mari de la lansarea de jQuery. Toate browserele moderne au acum propriul lor DOM gata funcție, fără utilizarea de o biblioteca jQuery.
Am'd recomanda acest lucru, dacă utilizați nativ Javascript.
document.addEventListener('DOMContentLoaded', function() {
alert("Ready!");
}, false);
Soluție alternativă. Eu o prefer pe asta pentru concizie și codul de simplitate.
(function () {
alert("I am here");
})();
Aceasta este o funcție anonim, în cazul în care numele nu este specificat. Ce se întâmplă aici este că, funcția este definită și executat împreună. Adăugați acest lucru la începutul sau la sfârșitul ale corpului, în funcție de dacă este să fie executat înainte de încărcare pagina sau curând după toate elementele HTML sunt încărcate.
fereastră.onload = function() {
... etc. nu este un răspuns bun.
Acest lucru va lucra probabil, dar se va rupe, de asemenea, orice alte funcții deja prindere la acest eveniment. Sau, dacă o altă funcție cârlige în acest caz, după a ta, se va rupe ta. Deci, puteți petrece o mulțime de ore mai târziu, încercând să-mi dau seama de ce ceva care a fost de lucru e't mai.
O mai robust răspuns aici:
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;
}
}
Un cod am folosit, am uitat unde am găsit-o pentru a da autorului de credit.
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);}
Sper că acest lucru ajută :)
Aruncati o privire la domReady script, care permite crearea de funcții multiple pentru a executa atunci când DOM a fost încărcat. L's de fapt ce Dom gata în multe populare biblioteci JavaScript, dar este ușor și pot fi luate și a adăugat la începutul extern fișier script.
Exemplu de utilizare
// add reference to domReady script or place
// contents of script before here
function codeAddress() {
}
domReady(codeAddress);
fereastra.onload va funcționa astfel:
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>
Încerca readystatechange
document.addEventListener('readystatechange', () => {
if (document.readyState == 'complete') codeAddress();
});
în cazul în care statele sunt:
DOMContentLoaded
<script>
document.addEventListener("DOMContentLoaded", () => {
mydiv.innerHTML += 'DOMContentLoaded' + '</br>';
});
window.onload = () => {
mydiv.innerHTML += 'window.onload' + '</br>';
} ;
document.addEventListener('readystatechange', () => {
mydiv.innerHTML += 'ReadyState: '+document.readyState + '</br>';
if (document.readyState == 'complete') codeAddress();
});
function codeAddress() {
mydiv.style.color = 'red';
}
</script>
<div id='mydiv'></div>
Dacă doriți să executați o funcție atunci când organismul se încarcă. În loc de a da un onload atribut tag-ul corpului, poti face ca aceasta.
// define the body
var body = document.getElementsByTagName("body")[0];
// or
// var body = document.querySelector("body");
// or
// var body = document.querySelectorAll("body")[0];
function codeAddress() {
// your function
alert("Hello World");
}
body.onload = function() {
codeAddress();
};
<!DOCTYPE html>
<html>
<head>
<title>learning java script</title>
</head>
<body>
<h1>Sample Heading</h1>
<p>Sample text</p>
</body>
</html>