언로드 전 팝업에 사용자 지정 메시지를 표시할 수 있습니까?

언로드 전 팝업에 사용자 지정 메시지를 표시할 수 있습니까?

를 할 때window.onbeforeunload(또는$(window).on("beforeunload")), 지정 할 수 ?) 에 를 할 할 를 ?

아마도 주요 브라우저에서 작동하는 작은 속임수?

기존의 답변을 살펴봄으로써 과거에는 다음과 같은 것들을 사용하여 이것이 가능했다는 느낌이 듭니다.confirm아니면alert아니면event.returnValue은 더이상 을 하지 . . . . . . . . . . . . . . . . . . ..

그러면 언로드 전 팝업에서 사용자 지정 메시지를 표시하는 방법은 무엇입니까?그것도 가능한가요?

tl;dr - 대부분의 최신 브라우저에서는 사용자 지정 메시지를 더 이상 설정할 수 없습니다.

간단한 메모(이것은 오래된 답변이므로) - 요즘에는 모든 주요 브라우저가 사용자 지정 메시지를 지원하지 않습니다.beforeunload팝업. 새로운 방법이 없습니다.여전히 이전 브라우저를 지원해야 하는 경우 아래 정보를 확인할 수 있습니다.

사용자가 창을 닫기 전에 확인 메시지를 설정하려면 사용할 수 있습니다.

jQuery

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

자바스크립트

window.onbeforeunload = function() {
    return "Leaving this page will reset the wizard";
};

      중요한 것은 당신이 할 수 없다는 것입니다. confirm/alert 안에서. beforeunload

몇 가지 참고 사항:

1. 일부 브라우저에서 이 기능을 지원하는 것은 아닙니다(MDN의 브라우저 호환성 섹션에 자세히 나와 있음) 2.Firefox에서는 이 메시지가 사용자에게 나타나려면 페이지와 실제 상호 작용을 수행해야 합니다.
   할 수 3. 각 브라우저는 메시지에 자신의 텍스트를 추가할 수 있습니다.

액세스할 수 있는 브라우저를 사용한 결과는 다음과 같습니다.

크롬:

파이어폭스:

사파리:

IE:

확실히 하기 위해서는 jquery가 포함되어 있어야 합니다.

브라우저 지원 및 사용자 지정 메시지 제거에 대한 자세한 내용:

1. Chrome이 ver 51에서 사용자 지정 메시지에 대한 지원을 없앴습니다.
2. 38 버전에서 Opera가 사용자 지정 메시지에 대한 지원을 제거했습니다.
3. Firefox는 ver 44.0에서 사용자 지정 메시지에 대한 지원을 제거했습니다(이 정보에 대한 소스를 여전히 찾고 있음).
4. Safari는 버전 9.1에서 사용자 지정 메시지에 대한 지원을 제거했습니다.

를 할 때window.onbeforeunload(또는$(window).on("beforeonload")), 지정 할 수 ?) 에 를 할 할 를 ?

더 이상은 안돼요.모든 주요 브라우저들이 실제 메시지를 무시하고 자신의 것만 보여주기 시작했습니다.

기존의 답변을 살펴봄으로써 과거에는 다음과 같은 것들을 사용하여 이것이 가능했다는 느낌이 듭니다.confirm아니면alert아니면event.returnValue은 더이상 을 하지 . . . . . . . . . . . . . . . . . . ..

맞아요.오래 전에, 당신은 당신이 사용할 수 있었습니다.confirm아니면alert은 a, 은 에서 을 을 은 에 onbeforeunload핸들러를 선택하면 해당 문자열이 표시됩니다.이제 문자열의 내용은 무시되고 플래그로 처리됩니다.

의 jQuery의 를 할 때on, 당신은 정말로 사용해야 합니다.returnValue원래 이벤트에서:

$(window).on("beforeunload", function(e) {
    // Your message won't get displayed by modern browsers; the browser's built-in
    // one will be instead. But for older browsers, best to include an actual
    // message instead of just "x" or similar.
    return e.originalEvent.returnValue = "Your message here";
});

아니면 옛날 방식으로:

window.onbeforeunload = function() {
    return "Your message here"; // Probably won't be shown, see note above
};

그게 당신이 할 수 있는 전부에요.

로 를 할 의 할 의 beforeunload팝업, 적어도 메인 브라우저 에서 (Chrome, Firefox, Safari, Edge, Opera) 에서

이는 다음과 같은 이유로 더 이상 불가능합니다.

• 크롬: 51버전
• 파이어폭스: 버전 44
• 사파리: 버전 9
• Edge: 한 번도 가능하지 않았습니다.
• 오페라: 38버전

자세한 내용은 다음을 참조하십시오.

• https://www.chromestatus.com/feature/5349061406228480
• https://caniuse.com/mdn-api_windoweventhandlers_onbeforeunload_custom_text_support

유사한 결과를 얻기 위한 대안적인 방법은 링크와 관련된 클릭 이벤트(현재 페이지에서 멀어짐)를 잡고 확인을 요청하는 것입니다.양식 제출 또는 스크립트를 통한 리디렉션을 포함하도록 조정할 수 있습니다(방향 전환을 트리거하는 요소에 특정 클래스와 정보를 적용해야 함).

다음은 작업 코드 조각(jQuery 기반)으로 작업하는 방법을 보여줍니다.

편집: SO의 코드 스니펫은 보안상의 이유로 모든 브라우저에서 작동하지 않습니다(스니펫은 iframe...).그리고 일부 브라우저에서는 "Use of window.confirm은 다른 오리진-도메인 iframes에서 허용되지 않습니다") 하지만 코드는 작동하므로 시도해 보십시오!

$('body').on('click', function(e) {
  var target, href;
  //Identifying target object
  target = $(e.target);

  //If the target object is a link or is contained in a link we show the confirmation message
  if (e.target.tagName === 'A' || target.parents('a').length > 0) {
    //Default behavior is prevented (the link doesn't work)
    e.preventDefault();

    if (window.confirm("Are you really really sure you want to continue?")) {

      //Identify link target
      if (e.target.tagName === 'A') {
        href = target.attr('href');
      } else {
        href = target.parents('a').first().attr('href');
      }

      //Redirect
      window.location.href = href;

    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<a href="https://stackoverflow.com">Click me and I'll take you home</a>

그냥 배경에 메시지를 보여주는 디브를 출연시켰습니다.그것은 모달 뒤에 있지만 이것은 아무것도 아닌 것보다 낫습니다.약간 음습하지만 적어도 사용자에게 왜 떠나지 말라고 귀찮게 하는지에 대한 정보를 줄 수 있습니다.

constructor($elem)
{
    $(window).unbind().bind('beforeunload', (e) => this.beforeUnload(e));
}
beforeUnload(e)
{
    $('#leaveWarning').show();
    setTimeout(function(){
        $('#leaveWarning').hide();
    }, 1); // set this to 1ms .. since timers are stopped for this modal,
           // the message will disappear right after the user clicked one of the options  
    return "This message is not relevant in most modern browsers.";
}

여기 일하는 Fiddle https://jsfiddle.net/sy3fda05/2/ 이 있습니다.

현대 브라우저에서는 기본 경보 기능을 사용하는 대신 사용자 지정 메시지를 설정할 수 없습니다.

체크아웃 브라우저 호환성

지원되는 모든 브라우저에 대해 이 코드 사용

window.onbeforeunload = function (e) {
    e = e || window.event;

    // For IE and Firefox prior to version 4
    if (e) {
        e.returnValue = 'Sure?';
    }

    // For Safari
    return 'Sure?';
};

크롬에서는 위의 모든 것이 작동하지 않습니다. 적어도 반품 false를 추가해야 합니다. 그렇지 않으면 아무 일도 일어나지 않습니다.

window.onbeforeunload = function(e) {
  $('#leaveWarning').show();

  // the timer is only to let the message box disappear after the user
  // decides to stay on this page
  // set this to 1ms .. since timers are stopped for this modal  
  setTimeout(function() {
    $('#leaveWarning').hide();
  }, 1);

  // 
  return false;
  return "This message is not relevant in most modern browsers.";
}

언급URL : https://stackoverflow.com/questions/38879742/is-it-possible-to-display-a-custom-message-in-the-beforeunload-popup