목차
- 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 정의
지정 객체가 로드된 경우 실행할 코드 지정.
1. onload 속성 사용 가능 태그 종류
<body>, <iframe>, <img>, <input type="image">, <link>, <script>, <style>
2.
- 주로, 모든 콘텐츠(이미지, 스크립트 파일, CSS 파일 등 포함) 완전히 로드 후 스크립트 실행 위해 <body> 요소에서 사용하나, 다른 요소에서도 사용 가능. (위 태그 종류 참조).
- <input> 요소 경우, <input type="image"> 경우만 사용 가능.
- 방문자의 브라우저 유형/버전 확인하고 그 정보를 기반으로 웹 페이지의 적절한 버전을 로드하는 데에도 사용 가능.
3.
모든 브라우저 지원.
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>
