페이지를 떠나기 전의 JavaScript
사용자가 페이지를 떠나기 전에 확인하고 싶습니다.OK라고 하면 새 페이지로 리다이렉트되거나 취소되어 종료됩니다.나는 그것을 언로드로 만들려고 했다.
<script type="text/javascript">
function con() {
var answer = confirm("do you want to check our other products")
if (answer){
alert("bye");
}
else{
window.location = "http://www.example.com";
}
}
</script>
</head>
<body onunload="con();">
<h1 style="text-align:center">main page</h1>
</body>
</html>
하지만 이미 페이지를 닫은 후에 확인되는 건가요?어떻게 하면 좋을까요?
누가 jQuery로 하는 방법을 보여주면 더 좋을 텐데?
onunload(또는onbeforeunload)는 사용자를 다른 페이지로 리다이렉트 할 수 없습니다.이것은 보안상의 이유로 인한 것입니다.
사용자가 페이지를 떠나기 전에 프롬프트를 표시하려면onbeforeunload:
window.onbeforeunload = function(){
return 'Are you sure you want to leave?';
};
또는 jQuery를 사용하는 경우:
$(window).bind('beforeunload', function(){
return 'Are you sure you want to leave?';
});
그러면 사용자가 페이지를 나갈지 여부만 묻습니다. 사용자가 페이지를 유지하도록 선택한 경우 리디렉션할 수 없습니다.사용자가 탈퇴를 선택하면 브라우저는 지시한 위치로 이동합니다.
사용할 수 있습니다.onunload페이지가 언로드되기 전에 작업을 수행할 수 있지만 거기에서 리다이렉트할 수 없습니다(Chrome 14+는 내부에서 경고를 차단합니다).onunload):
window.onunload = function() {
alert('Bye.');
}
또는 jQuery를 사용하는 경우:
$(window).unload(function(){
alert('Bye.');
});
양식 상태 변경 여부도 감지했을 때 이 코드입니다.
$('#form').data('serialize',$('#form').serialize()); // On load save form current state
$(window).bind('beforeunload', function(e){
if($('#form').serialize()!=$('#form').data('serialize'))return true;
else e=null; // i.e; if form state change show warning box, else don't show it.
});
Google JQuery Form Serialize 기능을 사용하면 모든 양식 입력을 수집하여 배열에 저장할 수 있습니다.이 설명으로 충분할 것 같습니다:)
저장되지 않은 데이터가 있을 때 확인 메시지를 표시하기 위해 이 작업을 수행했습니다.
window.onbeforeunload = function() {
if (isDirty) {
return 'There is unsaved data.';
}
return undefined;
}
돌아오는undefined확인을 무효로 합니다.
주의: 반품nullIE에서는 동작하지 않습니다.
또,undefined확인을 무효로 하다
window.onbeforeunload = undefined;
현재 페이지에서 나갈 때 경고합니다.
<script type='text/javascript'>
function goodbye(e) {
if(!e) e = window.event;
//e.cancelBubble is supported by IE - this will kill the bubbling process.
e.cancelBubble = true;
e.returnValue = 'You sure you want to leave?'; //This is displayed on the dialog
//e.stopPropagation works in Firefox.
if (e.stopPropagation) {
e.stopPropagation();
e.preventDefault();
}
}
window.onbeforeunload=goodbye;
</script>
Chrome 14+에서 팝업을 실행하려면 다음 작업을 수행해야 합니다.
jQuery(window).bind('beforeunload', function(){
return 'my text';
});
사용자에게 잔류 또는 탈퇴 여부를 묻는 메시지가 나타납니다.
다음 한 줄을 사용하여 페이지를 떠나기 전에 항상 사용자에게 물어볼 수 있습니다.
window.onbeforeunload = s => "";
페이지의 내용이 변경되었을 때 사용자에게 문의하려면 다음 답변을 참조하십시오.
여기 있는 솔루션의 대부분은 나에게 효과가 없었기 때문에 여기 있는 솔루션을 사용했습니다.
확인 상자를 허용할지 여부도 변수를 추가했습니다.
window.hideWarning = false;
window.addEventListener('beforeunload', (event) => {
if (!hideWarning) {
event.preventDefault();
event.returnValue = '';
}
});
일반적으로 사용자가 양식을 변경했지만 저장되지 않은 경우 이 메시지를 표시합니다.
사용자가 무언가를 변경한 경우에만 메시지를 표시하려면 이 방법을 사용합니다.
var form = $('#your-form'),
original = form.serialize()
form.submit(function(){
window.onbeforeunload = null
})
window.onbeforeunload = function(){
if (form.serialize() != original)
return 'Are you sure you want to leave?'
}
<!DOCTYPE html>
<html>
<body onbeforeunload="return myFunction()">
<p>Close this window, press F5 or click on the link below to invoke the onbeforeunload event.</p>
<a href="https://www.w3schools.com">Click here to go to w3schools.com</a>
<script>
function myFunction() {
return "Write something clever here...";
}
</script>
</body>
</html>
https://www.w3schools.com/tags/ev_onbeforeunload.asp
이너블과 디세이블이 조금 더 도움이 됩니다.
$(window).on('beforeunload.myPluginName', false); // or use function() instead of false
$(window).off('beforeunload.myPluginName');
언급URL : https://stackoverflow.com/questions/7080269/javascript-before-leaving-the-page
'programing' 카테고리의 다른 글
| PDF 파일을 HTML 링크로 다운로드하려면 어떻게 해야 합니까? (0) | 2022.10.28 |
|---|---|
| 텍스트 워처를 트리거하지 않고 텍스트 편집 텍스트를 변경하려면 어떻게 해야 합니까? (0) | 2022.10.28 |
| 테이블의 열을 카운트하려면 어떻게 해야 합니까? (0) | 2022.10.28 |
| Vue CLI 유닛 테스트(단일 테스트 실행 방법) (0) | 2022.10.28 |
| jpa를 사용하여 동일한 테이블의 mariadb를 선택하십시오. (0) | 2022.10.28 |