본문 바로가기
프로그래밍/JavaScript

[함수] 이 페이지를 벗어나면 작성된 내용은 저장되지 않습니다.

by 백룡화검 2008. 6. 27.

글 작성 후 저장하지 않고, 브라우저 새로고침, 닫기 또는 다른 페이지로 이동시 주의 메시지를 주는 간단한 스크립트입니다.
예제에서는 subject, message, poster 입력 항목을 확인합니다.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3c.org/TR/xhtml1/DTD/xhtml1-transitiona
    l.dtd">
<html xmlns="http://www.w3c.org/1999/xhtml">
<head><title></title>
<script type="text/javascript" language="javascript">
//<![CDATA[
var orig;
var preventUnload = true;
registerEvent(window, 'load', function () {
  orig = {
      subject  : document.getElementById('fm_subject').value,
      message  : document.getElementById('fm_message').value,
      poster  : document.getElementById('fm_poster').value
  };
});
registerEvent(window, 'beforeunload', function (e) {
  if (!e) e = window.event;
  curr = {
      subject  : document.getElementById('fm_subject').value,
      message  : document.getElementById('fm_message').value,
      poster  : document.getElementById('fm_poster').value
  };
  if (preventUnload &&
      (curr.subject != orig.subject ||
        curr.message != orig.message ||
        curr.poster != orig.poster))
  {
      e.returnValue = "이 페이지를 벗어나면 작성된 내용은 저장되지 않습니다.";
  }
});
function registerEvent(obj, ev, handler) {
  if (!(obj && ev && handler)) return;
  if (obj.addEventListener)
      obj.addEventListener(ev, handler, false);
  else if (obj.attachEvent)
      obj.attachEvent('on'+ev, handler);
}
// 이 함수는사용되지 않습니다. registerEvent() 함수를 작성하면서 같이 작성하였습니다.
function unregisterEvent(obj, ev, handler) {
  if (!(obj && ev && handler)) return;
  if (obj.removeEventListener) {
      try {
          obj.removeEventListener(ev, handler, false);
      }
      catch (e) {};
  }
  else if (obj.detachEvent) {
      try {
          obj.detachEvent('on'+ev, handler);
      }
      catch (e) {};
  }
}
function doSubmit () {
  preventUnload = false;
  // ...
  return true;
}
//]]>
</script>
</head>
<body>
<form method="post" onSubmit="return doSubmit()">
<input type="text" id="fm_subject" name="subject" />
<input type="text" id="fm_message" name="message" />
<input type="text" id="fm_poster"  name="poster" />
<input type="submit" value="확인" />
</form>
</body>
</html>
----------------------------------------------
나창호@Creative Web Engineering

출처 : PHPSCHOOL