JS에서 페이지 언로드 (탐색)를 어떻게 중지합니까?
페이지가 새로 고침되거나 탐색되지 않도록하는 방법을 아는 사람이 있습니까?
jQuery (function ($) { / * 언로드 알림시 전역 * / 경고 = 참; if (경고) { $ (window) .bind ( "unload", function () { if (confirm ( "이 페이지에서 나가시겠습니까") == true) { // 확인을 눌렀습니다. alert ( 'ok'); } else { // 취소를 눌렀습니다. alert ( '취소'); 거짓 반환; } }); } });
현재 전자 상거래 사이트에서 작업 중이며 향후 주문을 표시하는 페이지에는 +/- 버튼을 사용하여 주문한 항목의 수량을 변경할 수있는 기능이 있습니다. 이러한 방식으로 수량을 변경하는 것은 실제로 주문 자체를 변경하지 않으며 확인을 눌러야하며 따라서 주문을 변경하기 위해 긍정적 인 조치를 취해야합니다.
그러나 그들이 수량을 변경하고 페이지를 벗어나면 페이지를 새로 고치거나 페이지를 새로 고치면 변경된 수량이 손실되므로 사고 일 경우 경고를 드리고 싶습니다.
위의 코드에서 기본적으로 false가되는 전역 변수를 사용하고 있습니다 (테스트 용으로 만 true), 수량이 변경되면이 변수를 true로 업데이트하고 변경 사항을 확인하면 false로 설정합니다. .
경고가 참이고 페이지가 언로드되면 확인 상자를 제공합니다. 그들이이 페이지에 머물고 싶지 않다고하면 언로드를 중지해야합니다. return false가 작동하지 않지만 사용자가 다른 곳으로 이동할 수 있습니다 (디버깅을위한 경고 만 있음).
어떤 아이디어?
onbeforeunload
당신이 원하는 것입니다. 함수는 "이벤트 객체의 returnValue 속성에 문자열 값을 할당하고 동일한 문자열을 반환해야합니다" . 자세한 내용 은 Microsoft 및 Mozilla 의 문서를 확인 하십시오.
반환하는 문자열은 브라우저에서 사용자에게 사용자 지정 확인 상자를 표시하는 데 사용되어 사용자가 선택한 경우 해당 위치에 머무르는 것을 거부 할 수 있습니다. 브라우저 거부 공격을 일으키는 악성 스크립트를 방지하려면 그렇게해야합니다.
이 코드는 Natalie의 제안에 따라 경고하지만 페이지의 양식이 제출 된 경우 경고를 비활성화합니다. JQuery를 사용합니다.
var warning = true;
window.onbeforeunload = function() {
if (warning) {
return "You have made changes on this page that you have not yet confirmed. If you navigate away from this page you will lose your unsaved changes";
}
}
$('form').submit(function() {
window.onbeforeunload = null;
});
onbeforeunload 이벤트 를 사용하고 싶습니다 .
window.onbeforeunload = confirmExit;
function confirmExit()
{
return "You have attempted to leave this page. If you have made any changes to the fields without clicking the Save button, your changes will be lost. Are you sure you want to exit this page?";
}
window.onbeforeunload = function() {
if (warning) {
return 'You have made changes on this page that you have not yet confirmed.
If you navigate away from this page you will loose your unsaved changes';
}
}
크롬, 사파리 및 오페라에서는 지원되지 않습니다.
e.preventDefault()
false를 반환 하는 대신 사용해보십시오 . 'e'는 언로드 콜백 의 첫 번째 인수 입니다.
'Programing' 카테고리의 다른 글
사용자 데이터 업데이트-ASP.NET ID (0) | 2020.11.07 |
---|---|
TypeScript 내보내기 가져온 인터페이스 (0) | 2020.11.07 |
내 모델 유효성 검사를 우회하는 Factory-girl create (0) | 2020.11.07 |
이진 문자열을 십진수로 변환하는 방법? (0) | 2020.11.07 |
MatchCollection을 string 형 배열로 변환 (0) | 2020.11.07 |