2011-04-07 3 views
0

소개/면책 조항 : 예, 이것이 나쁘다는 것을 알고 있습니다. 예, 고객에게 내가 생각하는 것을 알리게했습니다. 아니, 나는 내 웹 사이트에서 이런 짓을하지 않을 것이다. 나는이 개념을 싫어한다. 그러나 때로는 클라이언트가 자신의 웹 사이트의 테스트 버전에서 사용자 환경이 어떻게 손상되었는지 사용자가 볼 수 있도록하기 위해해야 ​​할 일을해야합니다."INPUT"단추를 클릭하면 종료 팝업이 표시되지 않도록 방지하는 방법?

또한 데이터 손실을 방지하는 등 유용한 기능이있는 합법적 인 경우가 있습니다. StackOverflow는 질문 또는 답변을 게시하는 동안 우연히 다른 페이지로 이동 한 경우 종료 팝업을 사용하여 데이터를 저장하라는 메시지를 표시합니다.

이렇게 말씀 드리겠습니다.

문제 설명 :

나는 Snipplr - Confirm Leaving Your Site Onbeforeunload에있는 내가 실행 해요 자바 스크립트 기능을 가지고있다.

window.onload = function(){ 

    var allowUnload = true; 

    window.onbeforeunload = function(e){ 
     //allowUnload will allow us to see if user recently clicked something if so we wont allow the beforeunload. 
     if(allowUnload){ 
      //message to be returned to the popup box. 
      var message = 'Are you sure you want to leave this page message', 
       e = e||window.event; 
      if(e) 
       e.returnValue=message; // IE 
      return message; // Safari 
     } 
    }; 
    // We need this to allow us to see if user has clicked anywhere if user has clicked we wont allow beforeunload to run. 
    document.getElementsByTagName('body')[0].onclick = function(){ 
     allowUnload = false; 
     //setTimeout so we can reset allowUnload incase user didn't leave the page but randomly clicked. 
     setTimeout(function(){ allowUnload = true; },100); 
    }; 
}; 

코드 단편은 사용자가 페이지의 하이퍼 링크를 클릭하면 종료 팝업이 표시되지 않도록합니다. 종료 팝업은 사용자가 사이트를 떠날 때뿐만 아니라 F5 새로 고침을 위해 자체적으로 표시합니다. 이것은 하나의 예외와 함께 원하는 동작입니다.

나는 새로운 링크, 종료 팝업 화재로 parent.location를 대체하는 onclick 이벤트가 포함 된 버튼을 클릭하면 :이를 방지하기 위해 코드에 추가해야 할 무엇

<input type="button" onclick="parent.location = '/test.html';" /> 

을 버튼을 클릭하여 종료 팝업을 시작 하시겠습니까? 나는 사전 채팅 기능을 배포하는 데 사용 내 도메인에서 호스팅 사이트, 그냥 자바 스크립트 파일에 액세스 할 수없는

  • 다음과 같이

    구속 조건입니다.

  • 나는 onclick 이벤트를 (속성을 직접 편집하여) 수정할 수 없습니다.
  • 나는 onclick 이벤트를 동적으로 수정할 수는 있지만 나중에 문서화되지 않아 나중에 onclick 특성을 변경하기로 결정할 때 혼란을 야기 할 수 있습니다.
  • 나는 onclick 속성을 가로 채서 추가하려고합니다. 따라서 변경된 경우 변경 사항이 인식됩니다.
  • IE7 +, FF, Chrome에서 작동해야합니다.
  • JQuery를 사랑하고 홍보하는 것만 큼 먼저 그런 제안을하는 사람이 될 것입니다. 불행히도 여기서는 사용할 수 없습니다.

답변

0

은 검색 및 문제 해결의 몇 시간 후, 나는이 문제에 대한 해결책을했다 :

var button_element = document.getElementsByTagName('input')['button_name']; 

// get old onclick attribute 
var onclick = button_element.getAttribute("onclick"); 

// if onclick is not a function, it's not IE7, so use setAttribute 
if(typeof(onclick) != "function") { 
    button_element.setAttribute('onclick','allowUnload = false;' + onclick); // for FF,IE8,Chrome 

// if onclick is a function, use the IE7 method and call onclick() in the anonymous  function 
} else { 
    button_element.onclick = function() { 
     allowUnload = false; 
     onclick(); 
    }; // for IE7 
} 

는 IE7, 대개 getAttribute에서 ("onclick을")가 함수를 반환하지만 다른 모든에서 브라우저는 텍스트 문자열 일뿐입니다. 나는 eval을 사용하고 싶지 않았지만 this answer on how to dynamically bind onclick events 덕분에 모든 브라우저에서이 작업을 수행 할 수있었습니다.

또한 두 가지 방법이 호환되지 않기 때문에 onclick 변수가 사용할 메소드를 결정하는 함수인지 확인하여 기능 감지를 사용해야했습니다.

이제 IE7, IE8, IE9, FF 및 Chrome에서 입력 버튼을 클릭하면 페이지가 종료 팝업을 표시하지 않고 제대로 리디렉션됩니다.

참고 : Why does an onclick property set with setAttribute fail to work in IE?

관련 문제