onbeforeunload 이벤트를 프로그래밍 방식으로 트리거 할 수 있습니까?

Question

현재 "저장되지 않은"변경 사항에 대해 사용자에게 묻기 위해 onbeforeunload를 사용하는 jquery-form-observe 플러그인을 사용하고 있습니다.

하지만 버튼 클릭으로이를 트리거해야하는 시나리오가 있습니다. 버튼 클릭으로 궁극적으로 페이지가 변경되지만, 버튼 클릭이 시작되는 프로세스를 시작하기 전에 사용자에게 메시지를 보내려고합니다.

그래서 jQuery 또는 다른 방법을 통해 onbeforeunload를 트리거하는 방법이 있습니까?

Answer 1

직접적인 방법이 있는지 모르겠지만 브라우저의 확인 상자를 직접 에뮬레이션 할 수 있습니다.

function triggerBeforeUnload() { 
    var event = {}; 
    handler(event); 

    if (typeof event.returnValue == 'undefined' || 
     confirm('Are you sure you want to navigate away from this page?\n\n' + event.returnValue + '\n\nPress OK to continue, or Cancel to stay on the current page.')) { 
    // Continue with page unload 
    } else { 
    // Cancel page unload 
    } 
} 

편집 : 여기가 specs at MSDN에 따라 최대 요리 간단한 기능의

handler = beforeunload; 

참고 원래의 변화 : jquery.formobserver.js에서 오른쪽 function beforeunload(e) { ... }의 정의 후,이 줄을 추가 코드 : window.onbeforeunload은 handler으로 대체되었습니다.

Answer 2

당신은 .trigger() 방법으로 작업을 수행 할 수 있습니다 본질적으로 유사했다 내 자신의 질문에 대한 답을 검색하는 동안 나는이 질문을 우연히 발견

$('button').click(function(){ 
    $(window).trigger('beforeunload'); 
}); 

Answer 3

. 그래서, 나는 여기서 해결 방법을 생각해 냈다. 사용자가 특정 버튼을 클릭하고 다른 버튼을 클릭하지 않는 경우에만 "onbeforeunload"를 호출해야했습니다. 바라기를 이것은 당신의 질문에 약간 빛을 비춰줍니다.

jsfiddle에서 일하게되었습니다. 데모에서는 설정 한 테스트를 통해 버튼 중 하나에서만 작동한다는 것을 분명히 알 수 있습니다. 그러나 한가지주의 할 점이 있습니다. 버튼을 클릭하고 페이지에 머 무르도록 선택하면 모든 후속 버튼/링크/리디렉션/재로드가 "onbeforeunload"를 트리거합니다. "버그"에 대한 자신 만의 해결책을 생각해 볼 수 있습니다. 용어)를 사용하여 사용자가 페이지에 머무르면 해당 반응을 일으키지 않습니다. 그러나 테스트 환경에서 수행하도록 요청한 작업을 수행하고 수행합니다. 여기

코드입니다 :

$(document).ready(function() { 
     $('.testButton').click(function() { 
      window.onbeforeunload = function() { 
       return "Enter your message here..."; 
      } 
     }); 
    }); 

편집 :

그래서, 같은 일을하는 다른 방법을 연구 한 후에, 나는 jQuery의 CSTE 연구진를 사용하여 버튼에 이벤트를 묶을 수있는 또 다른 방법을 가로 질러왔다() 메소드를 호출합니다. 코드는 here으로 볼 수 있습니다. 이전 코드가 주석 처리되었는지 확인하십시오. 이전과 마찬가지로 "버그"가 있지만 여전히 요청 된 기능을 제공합니다. 나는 호출에 오류가 window.onbeforeunload 얻을 파이어 폭스와 IE8 모두에

$(document).ready(function() { 
     $('.testButton').on("click", function (event) { 
      window.onbeforeunload = function() { 
       return "Enter your message here..."; 
      } 
     }); 
    });