Saya ingin menjalankan fungsi ketika halaman di-load, tapi saya tidak ingin menggunakan itu di <body>
tag.
Saya punya script yang menjalankan jika saya memulai hal itu di <body>
, seperti ini:
function codeAddress() {
// code
}
<body onLoad="codeAddress()">
Tapi aku ingin menjalankannya tanpa <body onload="codeAddress()">
dan saya telah mencoba banyak hal, misalnya ini:
window.onload = codeAddress;
Tapi itu tidak bekerja.
Jadi bagaimana saya jalankan saat halaman dimuat?
jendela.onload = codeAddress;
harus bekerja - [di sini's 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>
Daripada menggunakan jQuery atau jendela.onload, native JavaScript telah mengadopsi beberapa fungsi yang besar sejak rilis dari jQuery. Semua browser modern sekarang memiliki mereka sendiri DOM siap fungsi tanpa menggunakan library jQuery.
I'd merekomendasikan hal ini jika anda menggunakan native Javascript.
document.addEventListener('DOMContentLoaded', function() {
alert("Ready!");
}, false);
Alternatif solusi. Saya lebih memilih untuk singkatnya dan kode kesederhanaan.
(function () {
alert("I am here");
})();
Ini adalah fungsi anonim, di mana nama yang tidak ditentukan. Apa yang terjadi di sini adalah bahwa, fungsi yang ditetapkan dan dilaksanakan bersama-sama. Tambahkan ini untuk awal atau akhir tubuh, tergantung pada apakah itu akan dieksekusi sebelum loading halaman atau segera setelah semua elemen HTML yang dimuat.
jendela.onload = function() {
... dll. bukan jawaban yang bagus.
Ini mungkin akan bekerja, tetapi juga akan memecah fungsi-fungsi lain yang sudah mengaitkan dengan peristiwa itu. Atau, jika fungsi lain kait ke acara tersebut setelah anda, itu akan menghancurkan anda. Jadi, anda dapat menghabiskan banyak jam kemudian mencoba untuk mencari tahu mengapa sesuatu itu bekerja isn't lagi.
Yang lebih kuat menjawab berikut:
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;
}
}
Beberapa kode saya telah menggunakan, saya lupa di mana saya menemukan hal itu untuk memberikan penulis kredit.
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);}
Semoga ini bisa membantu :)
Lihatlah domReady script yang memungkinkan pengaturan dari beberapa fungsi untuk mengeksekusi ketika DOM telah dimuat. It's pada dasarnya apa Dom siap tidak populer perpustakaan JavaScript, tapi lebih ringan dan dapat diambil dan ditambahkan pada awal eksternal file script.
Contoh penggunaan
// add reference to domReady script or place
// contents of script before here
function codeAddress() {
}
domReady(codeAddress);
jendela.onload akan bekerja seperti ini:
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>
Mencoba readystatechange
document.addEventListener('readystatechange', () => {
if (document.readyState == 'complete') codeAddress();
});
di mana negara adalah:
DOMContentLoaded
jendela.onload
<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>
Jika anda ingin menjalankan sebuah fungsi ketika tubuh banyak. Bukannya memberikan onload atribut untuk tag body, anda bisa melakukan seperti ini.
// 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>