[javascript] 페이지를 닫을 때 (떠나지 않을 때) jquery beforeunload?
“페이지에서 나가시겠습니까?”를 어떻게 표시 할 수 있습니까? 사용자가 실제로 페이지를 닫으려고 할 때 (브라우저 창 또는 탭에서 X 버튼 클릭) 페이지에서 벗어나려고 할 때 (다른 링크 클릭).
내 고객은 사용자가 페이지를 닫으려고 할 때 메시지가 표시되기를 원합니다. “페이지에서 나가시겠습니까? 아직 장바구니에 항목이 있습니다.”
불행히도 $(window).bind('beforeunload')사용자가 페이지를 닫을 때만 실행되지는 않습니다.
jQuery :
function checkCart() {
$.ajax({
url : 'index.php?route=module/cart/check',
type : 'POST',
dataType : 'json',
success : function (result) {
if (result) {
$(window).bind('beforeunload', function(){
return 'leave?';
});
}
}
})
}
답변
JQuery 를 사용하여이를 수행 할 수 있습니다 .
예를 들어 ,
<a href="your URL" id="navigate"> click here </a>
당신의 JQuery의지는,
$(document).ready(function(){
$('a').on('mousedown', stopNavigate);
$('a').on('mouseleave', function () {
$(window).on('beforeunload', function(){
return 'Are you sure you want to leave?';
});
});
});
function stopNavigate(){
$(window).off('beforeunload');
}
그리고 얻을 남기기 메시지 알림이 될 것입니다,
$(window).on('beforeunload', function(){
return 'Are you sure you want to leave?';
});
$(window).on('unload', function(){
logout();
});
이 솔루션은 모든 브라우저에서 작동하며 테스트했습니다.
답변
Ajax에 자바 스크립트 사용해보기
window.onbeforeunload = function(){
return 'Are you sure you want to leave?';
};
참조 링크
예 2 :
document.getElementsByClassName('eStore_buy_now_button')[0].onclick = function(){
window.btn_clicked = true;
};
window.onbeforeunload = function(){
if(!window.btn_clicked){
return 'You must click "Buy Now" to make payment and finish your order. If you leave now your order will be canceled.';
}
};
여기에서 사용자가 버튼을 클릭 할 때까지 페이지를 떠날 때마다 사용자에게 경고합니다.
답변
크레딧은 여기로 가야합니다 :
window.onbeforeunload가 트리거 될 때 링크가 클릭되었는지 감지하는 방법?
기본적으로이 솔루션은 리스너를 추가하여 링크 또는 창으로 인해 언로드 이벤트가 발생했는지 감지합니다.
var link_was_clicked = false;
document.addEventListener("click", function(e) {
if (e.target.nodeName.toLowerCase() === 'a') {
link_was_clicked = true;
}
}, true);
window.onbeforeunload = function(e) {
if(link_was_clicked) {
return;
}
return confirm('Are you sure?');
}
답변
여기 https://stackoverflow.com/a/1632004/330867에 표시된 대로이 페이지의 이탈을 시작하는 항목을 “필터링”하여 구현할 수 있습니다.
의견에서 언급했듯이 다른 질문의 코드 의 새 버전 은 다음 과 같습니다. 여기 에는 질문에서 만든 ajax 요청도 포함됩니다.
var canExit = true;
// For every function that will call an ajax query, you need to set the var "canExit" to false, then set it to false once the ajax is finished.
function checkCart() {
canExit = false;
$.ajax({
url : 'index.php?route=module/cart/check',
type : 'POST',
dataType : 'json',
success : function (result) {
if (result) {
canExit = true;
}
}
})
}
$(document).on('click', 'a', function() {canExit = true;}); // can exit if it's a link
$(window).on('beforeunload', function() {
if (canExit) return null; // null will allow exit without a question
// Else, just return the message you want to display
return "Do you really want to close?";
});
중요 : 전역 변수를 정의하지 않아야합니다 (여기 canExit). 이것은 더 간단한 버전을 위해 여기에 있습니다.
확인 메시지를 완전히 재정의 할 수는 없습니다 (적어도 크롬에서는). 반환하는 메시지는 Chrome에서 제공 한 메시지 앞에만 추가됩니다. 이유는 다음과 같습니다 . OnBeforeUnload 대화 상자를 재정의하고 내 대화 상자로 대체하려면 어떻게해야합니까?
답변
이것을 시도 ajax하고 return 문을 통해 데이터를로드 하고 표시합니다.
<script type="text/javascript">
function closeWindow(){
var Data = $.ajax({
type : "POST",
url : "file.txt", //loading a simple text file for sample.
cache : false,
global : false,
async : false,
success : function(data) {
return data;
}
}).responseText;
return "Are you sure you want to leave the page? You still have "+Data+" items in your shopping cart";
}
window.onbeforeunload = closeWindow;
</script>
