목차
- load 예제 - 로드 시 경고창 띄우기
- load 정의
- load 구문
- load 예제 - 이미지 로드 완료 시 실행
- load 예제 - 로드 시, 쿠키 활성 상태 체크
load 예제 - 로드 시 경고창 띄우기
<!DOCTYPE html>
<html>
<head>
<script>
function homzzang() {
alert("Welcome to Homzzang.com");
}
</script>
</head>
<body onload="homzzang()">
<h1>홈짱닷컴 Homzzang.com</h1>
</body>
</html>
결과보기
load 정의
객체가 로드되었을 때 실행.
1.
- 웹 페이지 내 모든 콘텐츠 (이미지, 스크립트 파일, CSS 파일 등)를 완전히 로드 후 스크립트 실행 위해 <body> 요소 안에서 주로 사용.
- 방문자의 브라우저 유형/버전 확인 후 그 정보를 기반으로 적절한 웹 페이지 버전을 로드하는 데도 사용 가능.
- 쿠키 처리하는데도 사용 가능.
- 윈도우(= 브라우저의 전역 객체) 로드 시 특정 코드 실행: window.onload = function() { ... }
2.
모든 브라우저 지원.
3. 지원 HTML 태그 요소 :
<body>, <frame>, <frameset>, <iframe>, <img>, <input type = "image">, <link>, <script> , <style>
load 구문
[HTML 속성 방식]
<element onload="script">
[JS 속성 방식]
object.onload = function(){script};
[JS 메서드 방식]
object.addEventListener("load", script);
[속성값]
script
객체 로드 완료 후, 실행할 내용.
주의: addEventListener() 메서드는 IE8 및 그 이하 버전은 지원 X.
load 예제 - 이미지 로드 완료 시 실행
<img src="https://source.unsplash.com/random" onload="homzzang()" width="100" height="132">
<script>
function homzzang() {
alert("이미지 로드 완료");
}
</script>
load 예제 - 로드 시, 쿠키 활성 상태 체크
<!DOCTYPE html>
<html>
<body onload="homzzang()">
<p id="demo"></p>
<script>
function homzzang() {
var text = "";
if (navigator.cookieEnabled == true) {
text = "쿠키 활성화 된 상태 O.";
} else {
text = "쿠키 활성화 된 상태 X";
}
document.getElementById("demo").innerHTML = text;
}
</script>
</body>
</html>
결과보기
