onbeforeunload 확인 화면 사용자 정의

Question

브라우저에서 onbeforeunload 이벤트에 대한 사용자 정의 확인란을 만들 수 있습니까? 나는 시도했지만 2 개의 확인 상자를 얻습니다 (하나는 반품 확인에 지나지 않습니다 ... 그리고 브라우저에서 표준 하나).

현재 내 코드는 다음과 같습니다.

var inputChanged = false;

$(window).load(function() {
    window.onbeforeunload = navigateAway;
    $(':input').bind('change', function() { inputChanged = true; });
});

function navigateAway(){
    if(inputChanged){
        return 'Are you sure you want to navigate away?';
    }
}

나는 이것을 위해 jQuery를 사용하고 있습니다.

Answer 1

window.onbeforeunload = function (e) {
  var message = "Your confirmation message goes here.",
  e = e || window.event;
  // For IE and Firefox
  if (e) {
    e.returnValue = message;
  }

  // For Safari
  return message;
};

참고 : 대부분의 브라우저는 다른 텍스트 후에이 메시지를 전달합니다. 확인 대화 상자의 내용을 완전히 제어하지 않습니다.

Answer 2

아니요, 브라우저에서 표준을 피할 수 없습니다. 당신이 할 수있는 일은 몇 가지 사용자 정의 텍스트를 주입하기 만하면됩니다. 다음 이벤트 핸들러를 사용하는 경우 (프로토 타입 Lib Way 등록) :

Event.observe(window, "beforeunload", function(event) {
    if (showMyBeforeUnloadConfirmation)
        event.returnValue = "foo bar baz";
});

(그리고 showMyBeforeUnloadConfirmation 사실) 다음 텍스트로 브라우저의 표준 확인을 얻을 수 있습니다.

이 페이지에서 멀리 탐색 하시겠습니까?

Foo Bar Baz

계속하려면 확인을 누르거나 현재 페이지를 유지하려면 취소하십시오.

OK] [취소

Answer 3

나는 같은 문제에 직면했고, 내 메시지와 함께 고유 한 대화 상자를 얻을 수 있었지만 내가 직면 한 문제는 다음과 같습니다.

1. 그것은 모든 탐색에 대한 메시지를 전하고 있었고 나는 클릭 한 클릭만을 위해서만 원했습니다.
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;