onbeforeunload 대화 상자를 어떻게 대체하고 내 자신의 것으로 바꾸려면 어떻게해야합니까?

StackOverflow https://stackoverflow.com/questions/276660

문제

페이지를 떠나기 전에 구원받지 않은 변경 사항에 대해 사용자에게 경고해야합니다 (매우 일반적인 문제). 

window.onbeforeunload=handler

이것은 작동하지만 내 자신의 텍스트를 감싸는 자극적 인 표준 메시지로 기본 대화 상자를 제기합니다. 표준 메시지를 완전히 바꾸어야하므로 텍스트가 명확하거나 (더 나은) 전체 대화 상자를 jQuery를 사용하여 모달 대화 상자로 바꾸십시오.

지금까지 나는 실패했고 답이있는 것처럼 보이는 다른 사람을 찾지 못했습니다. 가능합니까?

내 페이지의 JavaScript :

<script type="text/javascript">   
   window.onbeforeunload=closeIt;
</script>

closeit () 함수 :

function closeIt()
{
  if (changes == "true" || files == "true")
  {
      return "Here you can append a custom message to the default dialog.";
  }
}

jQuery와 JQModal을 사용하여 이런 종류의 시도를 시도했습니다 (사용자 정의 확인 대화 상자 사용) :

$(window).beforeunload(function() {
        confirm('new message: ' + this.href + ' !', this.href);
        return false;
    });

또한 작동하지 않습니다 - 나는 전직 이벤트에 묶을 수없는 것 같습니다.

도움이 되었습니까?

해결책

기본 대화를 수정할 수 없습니다 onbeforeunload, 당신의 최선의 방법은 그것과 함께 일하는 것입니다.

window.onbeforeunload = function() {
    return 'You have unsaved changes!';
}

여기에 참조가 있습니다 마이크로 소프트에서 :

문자열이 window.event의 returnValue 속성에 할당되면 사용자에게 현재 페이지에 머무르고 할당 된 문자열을 유지할 수있는 옵션을 제공하는 대화 상자가 나타납니다. 대화 상자에 나타나는 기본 명령문은 "이 페이지에서 멀리 탐색 하시겠습니까? ... 계속해서 확인을 눌러서 현재 페이지에 유지하려면 취소하십시오."는 제거하거나 변경할 수 없습니다.

문제는 다음과 같습니다.

  1. 언제 onbeforeunload 호출됩니다. 핸들러의 반환 값을 window.event.returnValue.
  2. 그런 다음 리턴 값을 문자열로 구문 분석합니다 (NULL이 아닌 한).
  3. 부터 false 문자열로 구문 분석되면 대화 상자가 발사되면 적절한 true/false.

결과는 할당하는 방법이없는 것 같습니다. false 에게 onbeforeunload 기본 대화에서 그것을 방지합니다.

jQuery에 대한 추가 메모 :

  • jQuery에서 이벤트 설정 5월 다른 사람을 허용하는 것처럼 문제가됩니다 onbeforeunload 이벤트도 발생합니다. 언로드 이벤트가 발생하기를 원한다면 평범한 ol 'javaScript를 고수합니다.

  • jQuery에는 바로 가기가 없습니다 onbeforeunload 따라서 제네릭을 사용해야합니다 bind 통사론.

    $(window).bind('beforeunload', function() {} );

09/04/2018 편집: onbeforeunload 대화 상자의 사용자 정의 메시지는 Chrome-51 (cf : 릴리스 노트)

다른 팁

저를 위해 일한 것, 사용 jQuery IE8, Chrome 및 Firefox에서 테스트 된 것은 다음과 같습니다.

$(window).bind("beforeunload",function(event) {
    if(hasChanged) return "You have unsaved changes";
});

IE와 다른 브라우저 동작 사이에 차이가 있으므로 프롬프트가 필요하지 않은 경우 아무것도 반환하지 않는 것이 중요합니다.

어떤 상황에서는 상자에 대해 할 수있는 일이 없지만 링크를 클릭하는 사람을 가로 채울 수 있습니다. 저에게 이것은 대부분의 시나리오에 대한 노력의 가치가 있었고 폴백으로서 언로드 이벤트를 떠났습니다.

표준 jQuery 대화 상자 대신 Boxy를 사용했습니다. 여기에서 사용할 수 있습니다. http://onehackoranother.com/projects/jquery/boxy/

$(':input').change(function() {
    if(!is_dirty){
        // When the user changes a field on this page, set our is_dirty flag.
        is_dirty = true;
    }
});

$('a').mousedown(function(e) {
    if(is_dirty) {
        // if the user navigates away from this page via an anchor link, 
        //    popup a new boxy confirmation.
        answer = Boxy.confirm("You have made some changes which you might want to save.");
    }
});

window.onbeforeunload = function() {
if((is_dirty)&&(!answer)){
            // call this if the box wasn't shown.
    return 'You have made some changes which you might want to save.';
    }
};

당신은 다른 이벤트에 첨부하고 어떤 종류의 앵커가 클릭되었는지에 대해 더 많이 필터링 할 수 있지만, 이것은 나에게 효과가 있으며 내가하고 싶은 일에 효과가 있으며 다른 사람들이 사용하거나 개선 할 수있는 예로 사용됩니다. 이 솔루션을 원하는 사람들을 위해 이것을 공유 할 것이라고 생각했습니다.

코드를 잘라 내 었으므로 그대로 작동하지 않을 수 있습니다.

1) OnOnload가 아닌 OnBeforeUnload를 사용하십시오.

2) 중요한 것은 반환 문을 실행하지 않는 것입니다. 나는 당신의 핸들러에서 돌아 오는 것을 피한다는 의미는 아닙니다. 당신은 잘 돌아 오지만, 당신은 당신이 함수의 끝에 도달하고 반환 명령문을 실행하지 않도록함으로써 그것을합니다. 이러한 조건에서 내장 표준 대화 상자는 발생하지 않습니다.

3) onbeforeunload를 사용하면 UnbeforeUnload 핸들러에서 Ajax 호출을 실행하여 서버에서 정리해야하지만 동기식이어야하며 onbeforeunload 핸들러에서 답장을 기다려야합니다 (여전히 존중해야합니다. 위의 조건 (2). 나는 이것을하고 잘 작동합니다. 동기식 Ajax 호출을 수행하면 응답이 다시 올 때까지 모든 것이 유지됩니다. 비동기식을 수행하는 경우 서버의 응답에 신경 쓰지 않는다고 생각하면 페이지 언로드가 계속되고 Ajax 호출은이 프로세스에 의해 실행중인 경우 원격 스크립트를 포함하여 ajax 호출이 중단됩니다.

배치 해보십시오 return; 메시지 대신 .. 이것은 대부분의 브라우저가 작동합니다. (이것은 실제로 대화의 선물을 방지합니다)

window.onbeforeunload = function(evt) {            
        //Your Extra Code
        return;
}

사용자가 눌린 버튼 (확인 또는 취소)을 감지 할 수 있습니다. 사용자가 페이지를 선택할 때만 OnUnload 함수가 호출되기 때문입니다. 이 기능에서 Althoug는 돔이 무너지기 때문에 가능성은 제한적입니다. JavaScript를 실행할 수 있지만 Ajax 게시물은 아무것도하지 않으므로 자동 로그 아웃 에이 Methode를 사용할 수 없습니다. 그러나 그것에 대한 해결책이 있습니다. OnUnload Funcion에서 실행 된 Window.open ( 'logout.php')이 새 창을 열면 사용자가 로그 아웃합니다.

function onunload = (){
    window.open('logout.php');
}

이 코드는 사용자가 페이지를 떠나거나 활성 창을 닫고 'logout.php'에 의해 로그 아웃 될 때 호출되었습니다. 로그 아웃 PHP가 코드로 구성되면 즉시 새 창이 닫힙니다.

window.close();

나는 같은 문제에 직면했다. 나는 내 메시지와 함께 고유 한 대화 상자를 얻는 것이 좋았지 만, 내가 직면 한 문제는 다음과 같다. 2) 사용자가 취소를 선택하면 내 자신의 확인 메시지를 사용하면 여전히 브라우저의 기본 대화 상자가 표시됩니다.

다음은 내가 찾은 솔루션 코드이며, 마스터 페이지에 쓴 솔루션 코드입니다.

function closeMe(evt) {
    if (typeof evt == 'undefined') {
        evt = window.event; }
    if (evt && evt.clientX >= (window.event.screenX - 150) &&
        evt.clientY >= -150 && evt.clientY <= 0) {
        return "Do you want to log out of your current session?";
    }
}
window.onbeforeunload = closeMe;

스팸을 피하기 위해 지금 Chrome에서는 할 수 없습니다. javaScript onbeforeunload가 사용자 정의 메시지를 표시하지 않습니다 자세한 사항은.

 <script type="text/javascript">
        window.onbeforeunload = function(evt) {
            var message = 'Are you sure you want to leave?';
            if (typeof evt == 'undefined') {
                evt = window.event;
            }       
            if (evt) {
                evt.returnValue = message;
            }
            return message;
        } 
    </script>

참조 http://www.codeprojectdownload.com

"bind"명령 "One"의 특수 버전을 사용하는 것은 어떻습니까? 이벤트 핸들러가 처음으로 실행되면 자동으로 이벤트 핸들러로 제거됩니다.

$(window).one("beforeunload", BeforeUnload);
라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top