잡동사니
[Javascript] window.onload '... is not defined' 원인 알아보기 본문
오늘은 window.onload를 사용하면서 발생할 수 있는 실수를 확인해보고자 합니다.
아래는 샘플 예제입니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>UserInfoService</title>
<script type="text/javascript">
window.onload = function() {
alert("window.onload 로드");
function windowOnload(){
alert('window.onload');
}
document.getElementById("input").onclick = function(){
alert("javascriptEvent");
}
}
function testOut(){
alert('testOut');
}
alert("스크립트 로드 완료");
</script>
</head>
<body>
<div id="pageDiv" style="width:1100px; height:1000px;">
<input type="button" value="testOut" onclick="testOut()"/>
<input type="button" value="windowOnload" onclick="htmlEvent()"/>
<input id="input" type="button" value="javascriptEvent" />
</div>
</body>
</html>
첨부파일 : 
test.html
위 코드의 화면입니다.
보시면 아시겠지만 간단히 설명하면 아래와 같습니다.
testOut 버튼은 전역으로 정의한 함수를 html에서 호출합니다.
windowOnload 버튼은 window.onload함수 내에서 정의한 함수를 html에서 호출합니다.
javascriptEvent 버튼은 window.onload함수 내에서 input 아이디를 가진 html 요소에 click 이벤트에 정의한 함수를 html에서 호출합니다.
결과는 testOut과 javascriptEvent 버튼은 동작을 하지만
windowOnload 버튼은 'ReferenceError: is not defined' 오류가 나면서 동작하지 않습니다.
이유를 살펴보면 다음과 같습니다.
testOut 함수를 전역으로 설정되어 있기 때문에 해당 페이지 내에서 어디서든 호출가능합니다.
javascriptEvent는 페이지 로드완료시 input 아이디에 직접적으로 click 이벤트에 대한 정의(?)를 함으로써 동작을 하게 만들어 줍니다.
하지만 windowOnload 함수는 window.onload 함수내에 정의되어 있으므로 지역 함수로 정의되어 window.onload 함수 밖에서는 사용할 수 없습니다.
이상 간단한 삽질 후기였습니다.
'IT > Web' 카테고리의 다른 글
| HTTP의 이해 (0) | 2020.02.05 |
|---|---|
| [keytool + OpenSSL + Tomcat] Window 환경에서 SSL 설정하기 (0) | 2017.03.31 |
| [NodeJS] 익명 채팅서비스 (0) | 2016.01.31 |
| [개발] 유지보수가 용이한 공통코드 관리 (2) | 2016.01.20 |
| [HTML] iframe 알아보기 (0) | 2015.10.22 |