자바스크립트를 이용한 페이지 새로고침, 페이지 닫기 이벤트 모니터링 방법에 대한 자세한 설명-JS 튜토리얼-php.cn

자바스크립트를 이용한 페이지 새로고침, 페이지 닫기 이벤트 모니터링 방법에 대한 자세한 설명

高洛峰

풀어 주다： 2017-01-10 09:30:59

원래의

4338명이 탐색했습니다.

우리는 일상생활에서 이러한 상황을 자주 접하게 됩니다. 링크를 클릭하거나, 페이지를 닫거나, 양식을 제출하는 등의 작업을 수행하면 작업 확인 여부와 기타 정보를 확인하라는 메시지가 표시됩니다.

자바스크립트의 onbeforeunload(), onunload() 이벤트에 대해 알려드리겠습니다.

같은 점:

둘 다 페이지 닫기 또는 새로 고침 이벤트에서 작동합니다.

차이:

unbeforeunload() 이벤트가 실행되는 순서는 onunload() 이벤트보다 먼저 발생합니다. (왜냐하면 unbeforeunload()는 페이지가 새로 고쳐지기 전에 발생하는 이벤트이고 onubload()는 페이지가 닫힌 후에 발생하기 때문입니다.)

unbeforeunload() 이벤트는 onunload() 이벤트가 트리거되는 것을 방지할 수 있습니다.

onunload() 이벤트는 페이지가 닫히는 것을 막을 수 없습니다.

브라우저 호환성

onunload:

IE6, IE7, IE8에서는 페이지 새로고침, 브라우저 종료, 페이지 점프 후 실행됩니다.

IE9는 페이지를 새로 고칠 때 실행되지만 페이지가 점프하거나 브라우저를 닫을 때는 실행할 수 없습니다.

firefox(firefox3.6 포함)는 태그를 닫은 후, 페이지를 점프한 후 또는 이후에 실행할 수 있습니다. 페이지를 새로 고치지만 브라우저를 닫을 수 없습니다.

Safari는 페이지 새로 고침 또는 페이지 점프 후에 실행되지만 브라우저를 닫을 때 실행되지 않습니다.

Opera와 Chrome은 실행되지 않습니다. 어떤 상황에서도.

자바스크립트를 이용한 페이지 새로고침, 페이지 닫기 이벤트 모니터링 방법에 대한 자세한 설명

onbeforeunload:

IE, Chrome, Safari 완벽 지원

Firefox는 문자 알림 메시지를 지원하지 않습니다

Opera

IE6, IE7을 지원하지 않습니다.

자바스크립트를 이용한 페이지 새로고침, 페이지 닫기 이벤트 모니터링 방법에 대한 자세한 설명

샘플 코드:

onbeforeunload():

메서드 1: html 요소에

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body onbeforeunload="return myFunction()">
<p>该实例演示了如何向 body 元素添加 "onbeforeunload" 事件。</p>
<p>关闭当前窗口，按下 F5 或点击以下链接触发 onbeforeunload 事件。</p>
<a href="http://www.qqtimezone.top">博客地址</a>  
<script>
function myFunction() {
  return "自定义内容";
}
</script>
</body>
</html>

로그인 후 복사

을 추가합니다. 방법 2: javascript에

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
<p>该实例演示了如何使用 HTML DOM 向 body 元素添加 "onbeforeunload" 事件。</p>
<p>关闭当前窗口，按下 F5 或点击以下链接触发 onbeforeunload 事件。</p>
<a href="http://www.runoob.com">点击调整到菜鸟教程</a>
<script>
window.onbeforeunload = function(event) {
  event.returnValue = "我在这写点东西...";
};
</script>
</body>
</html>

로그인 후 복사

을 추가합니다. addEventListener() 이벤트 (그러나 이 메소드는 IE8 이하에서는 지원되지 않습니다)

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<p>该实例演示了如何使用 addEventListener() 方法向 body 元素添加 "onbeforeunload" 事件。</p>
<p>关闭当前窗口，按下 F5 或点击以下链接触发 onbeforeunload 事件。</p>
<a href="http://www.qqtimezone.top">跳转地址</a>
<script>
window.addEventListener("beforeunload", function(event) {
  event.returnValue = "我在这写点东西...";
});
</script>
</body>
</html>

로그인 후 복사

onunload():

방법 1: 추가

<!DOCTYPE html>
<html>
<head>
  <title></title>
  <script type="text/javascript">
    function fun() {
      // dosomethings
    }
  </script>
</head>
<body onunload="fun()">
</body>
</html>

로그인 후 복사

<🎜 html 요소에 >

방법 2: javascript 추가

<!DOCTYPE html>
<html>
<head>
  <title></title>
  <script type="text/javascript">
  window.onunload = function() {
    // dosomethings
  };
  </script>
</head>
<body>
</body>
</html>

로그인 후 복사

위 내용이 이 글의 전체 내용이길 바랍니다. 여러분의 공부나 업무에 도움이 될 수 있으며 동시에 PHP 중국어 웹사이트도 지원해 주시기 바랍니다!

자바스크립트 모니터링 페이지 새로고침 및 페이지 닫기 이벤트 방법에 대한 자세한 설명은 PHP 중국어 홈페이지를 참고해주세요!