반응형
다음과 같이 페이지를 벗어나기 전에, ‘수정사항이 있으니 다시 한번 확인해보세요’라는 메시지를 구현하는 방법에 대한 정리입니다.
Javascript의 window.onBeforeUnload Event를 이용한 기능입니다.
실행시점
window.onBeforeUnload Event는 Window개체가 Unload되기 전에 실행됩니다. 정확하게 다음과 같은 시점이 있을 수 있습니다. 다만 IE 7, 8에서는 버그로 인해 다르게 동작하는 경우도 있으므로 참고가 필요합니다.
- 창이나 탭을 닫을 때
- 새로고침, 앞, 뒤로 이동버튼 클릭 시
- location.href 변경
- Form Submit 발생 시
- A Tag 클릭 시
- HREF에 URL을 지정한 경우: 발생
- HREF에 #을 지정한 경우: 발생 안함
- HREF에 javascript:void(0)을 지정한 경우: 발생 안함
(IE7, 8에서는 onbefureunload이벤트가 발생하는 오류가 존재합니다.)
- Iframe 내부에서 로드된 경우 Iframe의 Src가 변경될 경우
구현방법
01 |
//onBeforeUnload 이벤트 지정 |
02 |
$(window).bind('beforeunload', function() |
03 |
{ |
04 |
//페이지 변경이 있었는지 체크.. |
05 |
var isChanged = ....; |
06 |
07 |
//출력할 내용을 Return 해주면 확인 창이 뜨게 됩니다. |
08 |
if(isChanged) |
09 |
return '변경된 사항이 있습니다. 페이지에서 나가시겠습니까?';<br> |
10 |
//확인 창을 띄우지 않으려면 아무 내용도 Return 하지 마세요!! (Null조차도) |
11 |
}; |
12 |
13 |
//Form Submit 등 onBeforeUnload Event가 발생하길 원하지 않는 경우, 이벤트 해제 |
14 |
$('form').submit(function() |
15 |
{ |
16 |
$(window).unbind('beforeunload'); |
17 |
}); |
기타 확인사항
Firefox에서는 다음 그림과 같이, 지정한 안내텍스트가 출력되지 않는 버그가 있습니다. 곧 수정될 것이라고 하지만, 현재 Version 27까지도 수정되지 않은 상태입니다.
출처: http://nsinc.tistory.com/101 [NakedStrength Inc.]
반응형
'웹프로그래밍 > Javascript' 카테고리의 다른 글
| get Image width and height (0) | 2020.07.08 |
|---|---|
| moment.js (날짜관련 작업을 위한 자바스크립트 라이브러리) (0) | 2020.02.11 |
| javascript ios app open self.location / window. not working (0) | 2016.05.31 |
| jquery ui dialog close button missing (0) | 2016.05.30 |
| Javascript contains domain or email by string (0) | 2016.05.26 |
