특정 요소에 대해 onbeforeunload를 재정의할 수 있나요?

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

  •  09-06-2019
  •  | 
  •  

문제

나는 꽤 많은 작업을 수행하는 페이지를 가지고 있는데 사용자가 경고 없이 해당 페이지에서 벗어나는 것(브라우저 닫기, 뒤로 버튼 누르기 등)을 원하지 않습니다.나는 onbeforeunload 이벤트(내 생각에는 IE에만 ​​국한된 것으로 생각되며 프로젝트에서 ActiveX를 많이 사용하기 때문에 나에게 잘 작동함)가 훌륭하게 작동한다는 것을 알았습니다.

문제는 사용자가 오른쪽 상단 모서리에 있는 작은 "도움말" 아이콘을 클릭하여 언제든지 도움말 창을 팝업할 수 있기를 원한다는 것입니다.이로 인해 기본 창이 아무데도 가지 않고 페이지가 언로드되지 않더라도 onbeforeunload가 실행됩니다.

onbeforeunload 이벤트가 실행될 때 실행되는 JavaScript 함수는 event.returnValue에 텍스트를 넣습니다.어떻게든 도움말 아이콘이 클릭된 아이콘이라는 것을 확인할 수 있다면 그 상황에서는 event.returnValue에 텍스트를 넣을 수 없을 것입니다.하지만 페이지에서 그걸 어떻게 알 수 있을까요?

도움이 되었습니까?

해결책

어디 보자:도움말 "아이콘"은 실제로 javascript: URL?실제 버튼, 실제 링크로 변경하거나 최소한 onclick 이벤트 핸들러에 기능을 추가하세요(기본 동작을 방지함).문제 해결됨.

<!-- clicking this link will do nothing. No onbeforeunload handler triggered. 
Nothing. 
And you could put something in before the return false bit...
...and the onunload handler would still not get called... -->
<a href="http://www.google.com/" onclick="return false;">blah1</a>
<!-- this should also do nothing, but IE will trigger the onbeforeunload 
handler -->
<a href="javascript:void(0)">blah2</a>

다른 팁

편집하다: 아래의 "해결 방법"은 이해 부족으로 인해 완전히 과잉입니다.위의 Shog9의 답변을 따르십시오.

좋습니다. 질문을 작성하는 동안 현재로서는 효과가 있는 해결 방법을 생각해 냈습니다.

아이콘 위에 마우스를 올려 놓았는지 여부에 대한 부울 역할을 하는 전역 JavaScript 변수를 넣었습니다.그런 다음 이미지의 onmouseover 및 onmouseout 이벤트에 이벤트를 연결하고 이 값을 설정하는 함수를 작성합니다.마지막으로, event.returnValue를 설정하기 전에 이 값을 확인하는 onbeforeunload를 처리하는 함수를 코딩했습니다.

아마도 완벽한 해결 방법은 아니지만 지금은 효과가 있을 것입니다.

인터넷에서 다음과 같은 것을 사용하라고 제안하는 사람들이 많이 있습니다.

window.onbeforeunload = null

하지만 이것은 IE6에서는 작동하지 않습니다.이벤트 개체에 대한 MSDN 문서를 읽으면서 event.cancelBubble 속성에 대한 참조를 찾았는데 이것이 해결책이라고 생각했습니다.하지만 "event.cancelBubble=true" 설정이 쓸모없다고 지적한 Orso 덕분에 확인 프롬프트를 없애는 방법은 return 문을 완전히 제외하는 것입니다. 저는 부울 변수를 플래그로 사용하여 다음을 결정하기로 결정했습니다. 뭔가를 반환할지 말지.아래 예에서는 뒤에 있는 코드에 프로그래밍 방식으로 자바스크립트 코드를 추가합니다.

Page.ClientScript.RegisterStartupScript(typeof(String), "ConfirmClose", @"  <script>        window.onbeforeunload = confirmExit;        function confirmExit()      {           if(postback == false)               return ""Please don't leave this page without clicking the 'Save Changes' or 'Discard Changes' buttons."";                                                      }       </script>");

도움말 버튼에는 다음 aspx 마크업이 포함됩니다.

OnClientClick="postback=true;return true;

이렇게 하면 'postback' 변수가 true로 설정되고, 이는confirmExit() 함수에서 선택되어 이벤트를 취소하는 효과가 있습니다.

이것이 도움이 되기를 바랍니다.IE6 및 FF 1.5.0.2에서 테스트되었으며 작동합니다.

약간 투박한 방법이 있지만 대부분의 경우에는 작동합니다.

100% 단일 FRAME이 포함된 FRAMESET을 포함하는 "Holding" 팝업 페이지를 만들고 일반 onUnload 및 onbeforeUnload 이벤트 핸들러를 HEAD에 배치합니다.

<html>
<head>
<script language="Javascript" type="text/javascript">
  window.onbeforeunload = exitCheck;
  window.onunload = onCloseDoSomething;

  function onCloseDoSomething()
  {
  alert("This is executed at unload");
  }

  function exitCheck(evt)
  {
  return "Any string here."}
  </script>
  </head>

    <frameset rows="100%">
    <FRAME name="main" src="http://www.yourDomain.com/yourActualPage.aspx">
    </frameset>
<body>
</body>
</html>

이 방법을 사용하면 보고 싶은 실제 페이지를 자유롭게 사용할 수 있고, 외부 프레임 onUnload 또는 onbeforeUnload 이벤트가 실행되지 않고 다시 게시하고 하이퍼링크를 클릭할 수 있습니다.

외부 프레임이 새로 고쳐지거나 실제로 닫히면 이벤트가 실행됩니다.

내가 말했듯이, 완전하지는 않지만 모든 클릭이나 포스트백에서 이벤트가 시작됩니다.

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top