목차
- onbeforeunload 예제 - 사용자가 웹페이지 닫고 떠날 때 떠나기 전 실행
- onbeforeunload 정의
- onbeforeunload 구문
- onbeforeunload 예제 - cf. onunload 속성
- onbeforeunload 예제 - 현재창과 새창으로 각각 다른 페이지 열기
onbeforeunload 예제 - 사용자가 웹페이지 닫고 떠날 때 떠나기 전 실행
<!DOCTYPE html>
<html>
<body onbeforeunload="return homzzang()">
<a href="https://homzzang.com">홈짱닷컴 (Homzzang.com)</a>
<script>
function homzzang() {
return "다음에 또 와!!";
}
</script>
</body>
</html>
onbeforeunload 정의
사용자가 웹페이지 닫고 떠날 때 떠나기 전 실행. (떠날지 여부 확인할 때 주로 사용.)
1. onbeforeunload 속성 사용 가능 태그 종류
<body>
2.
- 이 이벤트 사용해, 페이지 아틸 확인 대화상자 알람창 띄우기 가능.
- 확인 대화상자 메시지는 브라우저마다 다름. (보통, "이 페이지에서 나가시겠습니까?"와 같은 것임. 이 메시지는 제거할 수 없음.)
- 기본 메시지와 함께 사용자 지정 메시지 작성 가능하나, 브라우저(예: Chrome/Firefox)에 따라 무시하기도 함.
3. (onbeforeunload / onunload) 차이점 - (목적/발생시기) 차이남
- onbeforeunload 이벤트는 사용자가 return 문 사용해 사용자가 페이지를 떠날 수 있는지 여부 결정하고, 떠나기 전 추가 작업 가능케하는데 초점.
- onunload 이벤트는 페이지 닫을 때 추가 작업 수행에 초점. (단, alert()이나 window.open() 사용은 권장 X)
4.
모든 브라우저 지원.
onbeforeunload 구문
HTML 방식
- <element onbeforeunload="myScript">
JS 방식 (3가지)
- object.onbeforeunload = ()=>{myScript};
- object.onbeforeunload = function(){myScript};
- object.addEventListener("beforeunload", myScript);
[속성값]
myScript
사용자가 웹페이지 닫고 떠날 때 떠나기 전, 실행할 JS 코드
- 주의: 함수명 사용 시, 다른 곳은 전부 소괄호까지 사용해 함수 호출하나 핑크색 myScript 자리는 "함수명만" 사용해 함수 호출.
- 사용 방식 통일 권장.
onbeforeunload 예제 - cf. onunload 속성
<script>
window.onbeforeunload = function() {
return "진짜 떠날 겨?"; // 브라우저에 따라 실행 안 되기도...
};
window.onunload = function() {
console.log("페이지 닫힘"); // F5 새로고침 시 잠시 실행됨.
alert("페이지 닫힘."); // 작동 X
window.open("https://google.com", "_blank"); // 작동 X
};
</script>
<a href="https://homzzang.com">홈짱닷컴 바로가기</a>
onbeforeunload 예제 - 현재창과 새창으로 각각 다른 페이지 열기
[주의] - unload 이벤트 대신, onclick 이벤트 사용해야 둘 다 열림.
<script>
window.onbeforeunload = function() {
var confirmaMsg = "페이지 진짜 떠날꺼야?";
return confirmMsg;
};
function openNaver() {
window.open("https://naver.com", "_blank");
}
</script>
<a href="https://homzzang.com" onclick="openNaver()">Homzzang.com 방문</a>
결과보기
