페이지를 떠나기 전에 JavaScript

233

사용자가 페이지를 떠나기 전에 확인하고 싶습니다. 그가 ok라고 말하면 새 페이지로 리디렉션되거나 취소됩니다. onunload로 만들려고했습니다.

<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로 어떻게하는지 보여 주면 더 좋을까요?

javascript jquery

— kd7
소스

1

ha ha ha ... 예, 맞습니다 .. 그러나 운 좋게도 내 사이트가 아닙니다 ... 내 고객이 그의 편에서 해달라고 요청합니다

— kd7

25

나중에 저장하지 않은 Gmail 페이지를 종료하려고 할 때 해당 알림을 보게되어 기쁩니다.

— Etdashou

참고 만 기본 메시지 4+ 파이어 폭스 대신 사용자 정의 메시지의 표시 developer.mozilla.org/en-US/docs/Web/Events/beforeunload#Notes

— baptx

4

저장되지 않은 변경 사항으로 웹 페이지를 떠나기 전에 사용자에게 경고 할

— Wasim A.

352

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.');
});

— 로켓 Hazmat
소스

12

@Joseph :에서 문자열을 반환 onbeforeunload하면 브라우저는 해당 문자열을 자체 확인 상자에 넣습니다. 사용 confirm에 쓸모가 onunload와 onbeforeunload가, 당신이하지 어디로 브라우저 만 제어 할 수 있기 때문에. 이 데모를 확인하십시오 : jsfiddle.net/3kvAC

— Rocket Hazmat

7

조건부에 메시지를 표시하려면 그냥 메모 onbeforeunload, return false대화의 브라우저 쇼 "false"를 만들 것입니다. return undefined사용자 경고없이 창을 닫으려면 해야 합니다.

— Dan Fitch

5

@Adam : Firefox는 해당 메시지의 사용자 정의를 허용하지 않기로 결정했습니다. 이는 브라우저의 일부이므로 해당 동작을 무시할 수 없습니다. 다른 브라우저에서도 메시지를 사용자 정의하는 기능이 제거 될 수 있습니다. 참조 : developer.mozilla.org/en-US/docs/Web/API/WindowEventHandlers/…

— 로켓 Hazmat

8

@RocketHazmat Chrome도 있습니다. 지금 만 말합니다 : 이 사이트를 떠나시겠습니까? 변경 사항이 저장되지 않을 수 있습니다.

— programmer5000

6

@ programmer5000 일부 악의적 인 웹 사이트는 쓸모없는 경고를 표시 할 수 있기 때문에 좋습니다 (예 : "은행 정보를 제공하지 않고 떠날 수 없음")

— Naman

34

이 코드는 양식 상태가 변경되었는지 감지 할 때도 발생합니다.

$('#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 양식 직렬화 기능을 사용하면 모든 양식 입력을 수집하여 배열에 저장합니다. 나는이 설명이 충분하다고 생각합니다 :)

— 와심 A.
소스

왜 이것이 효과가 없는지 아십니까? 다른 js 함수 / jquery 플러그인으로 덮어 쓸 수 있습니까? webrtc 앱을 실행 중이며 클라이언트가 창을 닫을 때 물건을 "닫기"하고 창을 닫을 필요가 있습니다.

— hey

1

이것은 다른 플러그인 등에 의해 덮어 쓸 수 있습니다. 대부분 개발자가 선택기로 실수를 범했습니다.

— Wasim A.

예 ... 페이지가로드 된 후 입력 필드를 숨기거나 비활성화하는 JS 코드가 있으면 숨겨진 / 비활성화 된 필드를 비교할 때 직렬화되지 않습니다. 물론 수표는 실패합니다. )이 해결 방법이있다 : stackoverflow.com/a/4748748/114029

— Leniel Maccaferri

그런데 ... 여기에 더 나은 방법이있다 : stackoverflow.com/q/16322042/114029

— Leniel Maccaferri

1

제출 버튼을 누르면 경고 메시지가 표시됩니다. 이를 방지하기 위해 제출 버튼을 클릭하면 양식을 다시 직렬화 할 수 있습니다.

— Adam

19

현재 페이지를 떠날 때 경고합니다

<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>

— 아짓 싱
소스

13

저장하지 않은 데이터가있을 때 확인 메시지를 표시하기 위해 수행 한 작업

window.onbeforeunload = function () {
            if (isDirty) {
                return "There are unsaved data.";
            }
            return undefined;
        }

"undefined"를 반환하면 확인이 비활성화됩니다.

참고 : "null"을 반환하면 IE에서 작동하지 않습니다.

또한 "undefined"를 사용하여 확인을 비활성화 할 수 있습니다

window.onbeforeunload = undefined;

— 미나 마타
소스

11

Chrome 14 이상에서 팝업을 표시하려면 다음을 수행해야합니다.

jQuery(window).bind('beforeunload', function(){
    return 'my text';
});

사용자는 체류 또는 휴가를 원하는지 묻습니다.

— 데이비드 벨 랑거
소스

왜 이것이 작동하지 않는지 아십니까? jquery 플러그인과 함께 크롬 (최신 버전)을 사용하고 있지만 창을 닫을 때 경고가 표시되지 않습니다.

— 야

@hey 왜 다운 투표? 작동 중입니다 ... 외부에 있는지 확인해야합니다 jQuery(document). 모든 플러그인이로드 된 직후에 설치하는 것이 좋습니다. 또한,이 스 니펫은 경고를 수행하지 않습니다 return. 의 데모 일뿐입니다 .

— David Bélanger

7

다음 한 줄짜리를 사용 하여 페이지를 떠나기 전에 항상 사용자에게 요청할 수 있습니다 .

window.onbeforeunload = s => "";

페이지의 어떤 것이 수정되었는지 사용자에게 물어 보려면 이 답변을 참조하십시오 .

— spencer.sm
소스

페이지를 새로 고치거나 종료하는 경우에도 발생합니까?

— Si8

예, 새로 고침 또는 종료시 실행됩니다.

— spencer.sm 2012 년

언제 새로 고침인지 언제 처음인지 알 수 있습니까?

— Si8

사용자가 페이지를 새로 고치는 것과 반대로 페이지를 처음 방문하는 경우

— Si8

아뇨 사용자가 페이지를 처음 방문하면 시작되지 않습니다. 페이지를 닫거나 변경하거나 새로 고칠 때만 가능합니다.

— spencer.sm

4

일반적으로 사용자가 양식을 변경했지만 저장하지 않은 경우이 메시지를 표시하려고합니다.

사용자가 무언가를 변경 한 경우에만 메시지를 표시하려면이 방법을 사용하십시오.

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?'
}

— 사이먼 프란 젠
소스

3

<!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

— 에미 르 마마 쇼프
소스

1

조금 더 도움이, 활성화 및 비활성화

$(window).on('beforeunload.myPluginName', false); // or use function() instead of false
$(window).off('beforeunload.myPluginName');

— l2aelba
소스

1

여기에있는 대부분의 솔루션이 나를 위해 작동하지 않아서 여기에있는 것을 사용했습니다 .

확인 상자를 허용하거나 허용하지 않는 변수도 추가했습니다.

window.hideWarning = false;
window.addEventListener('beforeunload', (event) => {
    if (!hideWarning) {
        event.preventDefault();
        event.returnValue = '';
    }

});

— 라지 샤르마
소스