웹 페이지를 닫고 js에서 나가기 프롬프트를 표시하는 방법(자세한 튜토리얼)
- 亚连원래의
- 2018-06-21 19:05:056001검색
이 글은 주로 실용적인 JS 기능을 제공합니다. 브라우저를 모니터링하고 닫을 때 나갈지 여부를 묻는 작은 기능입니다.
웹 페이지를 닫을 때 현재 페이지를 떠날지 여부를 확인하는 프롬프트 상자가 자주 표시되나요? 사용자가 의도적으로 또는 의도하지 않게 페이지를 닫아 데이터 손실을 초래하는 것을 방지하기 위한 이러한 프롬프트가 있는 일부 온라인 테스트 시스템, 정보 입력 시스템 등을 생각해 보십시오. 여기서 구현 프로세스는 HTML DOM 이벤트의 onunload 및 onbeforeunload 메소드를 사용하여 매우 간단합니다.
unload 이벤트 속성
정의: 사용자가 문서를 언로드할 때 JavaScript 조각을 실행합니다. 예:
// body
<body onunload="goodbye()">
//window
window.onbeforeunload=function(e){
var e = window.event||e;
e.returnValue=("确定离开当前页面吗？");
}Usage: 사용자가 페이지를 떠날 때 언로드 이벤트가 발생합니다. 참고: 페이지를 다시 로드하면 unload 이벤트(onload 이벤트도 포함)도 실행됩니다.
트리거:
브라우저 창을 닫고 주소 표시줄이나 즐겨찾기를 통해 다른 페이지로 이동할 때, 돌아가기, 앞으로, 새로 고침을 클릭할 때, 홈페이지 중 하나를 클릭할 때, 클릭할 때 다음 이벤트 중 하나를 호출합니다. 다른 페이지에 대한 URL 연결 시기: 클릭, 문서 쓰기, 문서 열기, 문서 닫기, 창 닫기, 창 탐색, 창 탐색 및 찾기, 위치 바꾸기, 위치 다시 로드, 양식 제출을 사용하여 페이지를 열 때. 페이지를 열 때 요청에 이 페이지의 창 이름을 입력합니다. location.href의 값을 재할당하는 경우. input type="submit" 버튼을 통해 지정된 작업이 포함된 양식을 제출하는 경우. onbeforeunload 이벤트 속성
정의: 현재 페이지를 떠나려고 할 때(새로 고침 또는 닫기) JavaScript를 실행합니다. 예:
//body
<body onbeforeunload="goodbye()">
//window
window.onbeforeunload=function(e){
var e = window.event||e;
e.returnValue=("确定离开当前页面吗？");
}Usage: onbeforeunload 이벤트는 현재 페이지를 떠나려고 할 때(새로 고침 또는 닫기) 트리거됩니다. ). 이 이벤트는 사용자에게 페이지 탐색을 계속할지 아니면 현재 페이지를 떠날지 묻는 대화 상자를 팝업하는 데 사용할 수 있습니다. 대화 상자의 기본 프롬프트 메시지는 브라우저에 따라 다릅니다. 표준 메시지는 "이 페이지를 떠나시겠습니까?"와 유사합니다. 이 정보는 삭제할 수 없습니다. 그러나 표준 정보와 함께 대화 상자에 표시되는 일부 메시지 프롬프트를 사용자 정의할 수 있습니다. 참고: Firefox 브라우저에서는 기본 알림 정보만 표시됩니다(사용자 정의 정보는 표시되지 않음).
트리거:
브라우저 창 닫기 주소 표시줄이나 즐겨찾기를 통해 다른 페이지로 이동할 때 돌아가기, 전달, 새로고침, 홈페이지를 클릭할 때 다른 페이지의 URL 링크를 클릭할 때 다음 이벤트 중 하나를 호출할 때 : 클릭, 문서 쓰기, 문서 열기, 문서 닫기, 창 닫기, 창 탐색, 창 탐색 및 찾기, 위치 바꾸기, 위치 다시 로드, 양식 제출 창 열기를 사용하여 페이지를 열고 이 페이지의 창 이름을 전달합니다. 페이지를 열 때 요청합니다. location.href의 값을 재할당하는 경우. input type="submit" 버튼을 통해 지정된 작업이 포함된 양식을 제출하는 경우.
브라우저 지원
현재 주류 브라우저는 이 두 가지 이벤트 속성을 지원합니다.
개요
onunload 및 onbeforeunload는 새로 고치거나 닫을 때 모두 호출되며 창을 통해 3f1c4e4b6b16bbbd69b2ee476dc4f83a 스크립트에 전달될 수 있습니다. 6c04bd5ca3fcae76e30b72ad730ca86d에 지정하거나 지정하세요. 차이점은 onbeforeunload가 onunload보다 먼저 실행되고, onunload의 실행도 방지할 수 있다는 점입니다. onbeforeunload는 페이지가 새로 고쳐지거나 닫힐 때도 호출됩니다. onbeforeunload는 서버에서 로드해야 하는 새 페이지를 읽는 동안 읽기가 아직 시작되지 않았습니다. 현재 페이지가 삭제될 때 호출됩니다. onunload는 페이지가 업데이트되고 닫히는 것을 막을 수 없지만 onbeforeunload는 가능합니다.
첨부:
Onload는 페이지가 로드될 때만 실행됩니다.
Onbeforeunload는 페이지가 닫힐 때 먼저 실행되고, onunload는 최종적으로 실행됩니다.
페이지가 새로고침될 때 onbeforeunload가 먼저 실행되고, 그 다음 onunload가 실행되고, 마지막으로 실행됩니다. onload
몇 가지 렌더링이 첨부되었습니다:
Binding body 라벨 코드:
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>测试</title>
<script>
function checkLeave(){
event.returnValue="确定离开当前页面吗？";
}
</script>
</head>
<body onbeforeunload="checkLeave()">
测试
</body>
</html>Google Chrome에서의 효과:
새로 고침 버튼 클릭:
돌아가기 버튼 클릭:
다음을 통해 다른 인터페이스로 이동 작업 표시줄 또는 즐겨찾기:
페이지 닫기:
가장자리 아래 효과:
새로 고침 버튼 클릭:
点击返回按钮：
关闭页面：
注：在新版的火狐浏览器（我是用的版本: 57.0 ）里面，上面这种写法不生效？！
绑定window对象的代码：
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>测试</title>
<script>
window.onbeforeunload=function(e){
var e = window.event||e;
e.returnValue=("确定离开当前页面吗？");
}
</script>
</head>
<body>
测试
</body>
</html>火狐下的效果：
点击刷新按钮：
点击返回按钮：
关闭页面：
上面是我整理给大家的，希望今后会对大家有帮助。
相关文章：
위 내용은 웹 페이지를 닫고 js에서 나가기 프롬프트를 표시하는 방법(자세한 튜토리얼)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!