목차
onload 예제 - <body> 경우 onload 정의 onload 구문 onload 예제 - <iframe> 경우 onload 예제 - <img> 경우 onload 예제 - <input> 경우 onload 예제 - <link> 경우 onload 예제 - <script> 경우 onload 예제 - <style> 경우
onload 예제 - <body> 경우
<!DOCTYPE html>
<html>
<head>
<script>
function homzzang() {
alert("웹페이지 로드 완료");
}
</script>
</head>
<body onload="homzzang()">
<h1>홈짱닷컴 Homzzang.com</h1>
</body>
</html>
onload 정의
지정 객체가 로드된 경우 실행할 코드 지정.
<body> , <iframe> , <img> , <input type="image"> , <link> , <script> , <style>
주로, 모든 콘텐츠(이미지, 스크립트 파일, CSS 파일 등 포함) 완전히 로드 후 스크립트 실행 위해 <body> 요소에서 사용하나, 다른 요소에서도 사용 가능. (위 태그 종류 참조).
<input> 요소 경우, <input type="image"> 경우만 사용 가능.
방문자의 브라우저 유형/버전 확인하고 그 정보를 기반으로 웹 페이지의 적절한 버전을 로드하는 데에도 사용 가능.
3. DOM 요소 로드 완료 후 JS 코드 실행
window.onload = function() {
// (외부 리소스 포함해서) 모든 요소 로드 후 실행될 코드
};
또는,
document.addEventListener("DOMContentLoaded ", function() {
// ( 외부 리소스 무관하게) DOM 요소 로드 후 실행될 코드
});
4.
모든 브라우저 지원.
onload 구문
HTML 방식
<element onload="myScript ">
JS 방식 (3가지)
object. onload = ()=> {myScript };object .onload = function(){myScript };object .addEventListener("load", myScript
[속성값]
myScript
지정 객체 로드 완료 시, 실행할 JS 코드
주의: 함수명 사용 시, 다른 곳은 전부 소괄호까지 사용해 함수 호출하나 핑크색 myScript 자리는 "함수명만" 사용해 함수 호출. 사용 방식 통일 권장.
onload 예제 - <iframe> 경우
<iframe src="https://homzzang.com" onload="homzzang()"></iframe>
<script>
function homzzang() {
alert("아이프레임 로드 완료");
}
</script>
onload 예제 - <img> 경우
<img src="homzzang.gif" onload="homzzang()" width="200" height="100">
<script>
function homzzang() {
alert("이미지 로드 완료");
}
</script>
onload 예제 - <input> 경우
<input type="image" src="homzzang.jpg" onload="homzzang()">
<script>
function homzzang() {
alert("인풋이미지 로드 완료");
}
</script>
onload 예제 - <link> 경우
<link rel="stylesheet" href="style.css" onload="homzzang()">
<script>
function homzzang() {
alert("외부스타일파일 로드 완료");
}
</script>
onload 예제 - <script> 경우
<script src="script.js" onload="homzzang()"></script>
<script>
function homzzang() {
alert("외부스크립트파일 로드 완료");
}
</script>
onload 예제 - <style> 경우
<style onload="homzzang()">body {background-color: yellow;}</style>
<script>
function homzzang() {
alert("내부스타일 로드 완료");
}
</script>
최신댓글