“이 페이지에서 멀리 탐색하고 싶습니까?”를 보여주는 방법. 변경이 커질 때?

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

문제

여기 stackoverflow에서 변경을 시작한 후 페이지에서 벗어나려고 하면 자바스크립트 확인 버튼이 표시되고 다음을 묻습니다."이 페이지에서 멀리 탐색 하시겠습니까?" BLEE BLAH BLOO ...

이전에 이것을 구현한 사람이 있습니까? 변경 사항이 커밋되었는지 어떻게 추적합니까?나는 이것을 스스로 할 수 있다고 믿으며 전문가 여러분으로부터 좋은 사례를 배우려고 노력하고 있습니다.

다음을 시도했지만 여전히 작동하지 않습니다.

<html>
<body>
    <p>Close the page to trigger the onunload event.</p>
    <script type="text/javascript">
        var changes = false;        
        window.onbeforeunload = function() {
            if (changes)
            {
                var message = "Are you sure you want to navigate away from this page?\n\nYou have started writing or editing a post.\n\nPress OK to continue or Cancel to stay on the current page.";
                if (confirm(message)) return true;
                else return false;
            }
        }
    </script>

    <input type='text' onchange='changes=true;'> </input>
</body>
</html>

누구든지 예제를 게시할 수 있나요?

도움이 되었습니까?

해결책

업데이트(2017)

최신 브라우저는 이제 사용자 정의 메시지를 보안 위험으로 표시하는 것을 고려하고 있습니다. 제거됨 그들 모두로부터.이제 브라우저는 일반 메시지만 표시합니다.더 이상 메시지 설정에 대해 걱정할 필요가 없으므로 다음과 같이 간단합니다.

// Enable navigation prompt
window.onbeforeunload = function() {
    return true;
};
// Remove navigation prompt
window.onbeforeunload = null;

레거시 브라우저 지원에 대해서는 아래를 읽어보세요.

업데이트(2013)

원래 답변은 IE6-8 및 FX1-3.5(작성 당시 2009년에 우리가 목표로 삼았던 것)에 적합하지만 지금은 다소 구식이며 대부분의 최신 브라우저에서는 작동하지 않습니다. 참고로 아래에 있습니다.

그만큼 window.onbeforeunload 모든 브라우저에서 일관되게 처리되지는 않습니다.문자열이 아닌 함수 참조여야 하지만(원래 답변에 명시된 대로) 대부분의 검사는 무엇인가 할당되었는지 여부를 확인하는 것으로 나타나기 때문에 이전 브라우저에서 작동합니다. onbeforeunload (반환하는 함수 포함 null).

당신이 설정 window.onbeforeunload 함수 참조로 설정해야 하지만 이전 브라우저에서는 returnValue 단순히 문자열을 반환하는 대신 이벤트에 대해 다음과 같이 설명합니다.

var confirmOnPageExit = function (e) 
{
    // If we haven't been passed the event get the window.event
    e = e || window.event;

    var message = 'Any text will block the navigation and display a prompt';

    // For IE6-8 and Firefox prior to version 4
    if (e) 
    {
        e.returnValue = message;
    }

    // For Chrome, Safari, IE8+ and Opera 12+
    return message;
};

당신은 그것을 가질 수 없습니다 confirmOnPageExit 사용자가 메시지 없이 계속 진행하도록 하려면 검사를 수행하고 null을 반환하십시오.이벤트를 안정적으로 켜고 끄려면 이벤트를 제거해야 합니다.

// Turn it on - assign the function that returns the string
window.onbeforeunload = confirmOnPageExit;

// Turn it off - remove the function entirely
window.onbeforeunload = null;

원래 답변 (2009년에 근무)

켜려면 다음 단계를 따르세요.

window.onbeforeunload = "Are you sure you want to leave?";

끄려면:

window.onbeforeunload = null;

이는 일반적인 이벤트가 아니라는 점을 명심하세요. 표준 방식으로는 바인딩할 수 없습니다.

값을 확인하려면?이는 유효성 검사 프레임워크에 따라 다릅니다.

jQuery에서는 다음과 같을 수 있습니다(매우 기본적인 예).

$('input').change(function() {
    if( $(this).val() != "" )
        window.onbeforeunload = "Are you sure you want to leave?";
});

다른 팁

그만큼 onbeforeunload Microsoft-ism은 표준 솔루션에 가장 가까운 것이지만 브라우저 지원은 고르지 않다는 점에 유의하십시오.예를 들어Opera의 경우 버전 12 이상에서만 작동합니다(이 글을 쓰는 시점에서는 아직 베타 버전입니다).

또한 최대 호환성, 에 설명된 대로 단순히 문자열을 반환하는 것 이상의 작업을 수행해야 합니다. Mozilla 개발자 네트워크.

예: 탐색 프롬프트를 활성화/비활성화하기 위해 다음 두 가지 기능을 정의합니다(참조:MDN 예):

function enableBeforeUnload() {
    window.onbeforeunload = function (e) {
        return "Discard changes?";
    };
}
function disableBeforeUnload() {
    window.onbeforeunload = null;
}

그런 다음 다음과 같은 형식을 정의합니다.

<form method="POST" action="" onsubmit="disableBeforeUnload();">
    <textarea name="text"
              onchange="enableBeforeUnload();"
              onkeyup="enableBeforeUnload();">
    </textarea>
    <button type="submit">Save</button>
</form>

이렇게 하면 사용자가 텍스트 영역을 변경한 경우에만 탐색에 대한 경고를 받게 되며 실제로 양식을 제출할 때 메시지가 표시되지 않습니다.

Chrome과 Safari에서 이 작업을 수행하려면 다음과 같이 해야 합니다.

window.onbeforeunload = function(e) {
    return "Sure you want to leave?";
};

참조: https://developer.mozilla.org/en/DOM/window.onbeforeunload

JQuery 사용 이 일은 꽤 쉽습니다.세트에 바인딩할 수 있기 때문입니다.

onbeforeunload를 수행하는 것만으로는 충분하지 않습니다. 누군가 편집을 시작한 경우에만 탐색을 실행하고 싶습니다.

jquerys 'beforeunload'는 나에게 효과적이었습니다.

$(window).bind('beforeunload', function(){
    if( $('input').val() !== '' ){
        return "It looks like you have input you haven't submitted."
    }
});

이는 양식에 데이터가 입력된 경우 메시지를 표시하고 양식이 제출된 경우 메시지를 표시하지 않는 쉬운 방법입니다.

$(function () {
    $("input, textarea, select").on("input change", function() {
        window.onbeforeunload = window.onbeforeunload || function (e) {
            return "You have unsaved changes.  Do you want to leave this page and lose your changes?";
        };
    });
    $("form").on("submit", function() {
        window.onbeforeunload = null;
    });
})

간단한 해결책을 찾는 새로운 사람들을 위해 시도해 보세요. Areyousure.js

확장하려면 Keith의 이미 놀라운 답변:

맞춤 경고 메시지

사용자 정의 경고 메시지를 허용하려면 다음과 같은 함수로 래핑하면 됩니다.

function preventNavigation(message) {
    var confirmOnPageExit = function (e) {
        // If we haven't been passed the event get the window.event
        e = e || window.event;

        // For IE6-8 and Firefox prior to version 4
        if (e)
        {
            e.returnValue = message;
        }

        // For Chrome, Safari, IE8+ and Opera 12+
        return message;
    };
    window.onbeforeunload = confirmOnPageExit;
}

그런 다음 사용자 정의 메시지로 해당 함수를 호출하십시오.

preventNavigation("Baby, please don't go!!!");

내비게이션 다시 활성화

내비게이션을 다시 활성화하려면 설정만 하면 됩니다. window.onbeforeunload 에게 null.여기 어디에서나 호출할 수 있는 깔끔한 작은 함수가 들어 있습니다.

function enableNavigation() {
    window.onbeforeunload = null;
}

jQuery를 사용하여 이를 바인딩하여 요소를 형성합니다.

jQuery를 사용하는 경우 다음과 같이 양식의 모든 요소에 쉽게 바인딩할 수 있습니다.

$("#yourForm :input").change(function() {
    preventNavigation("You have not saved the form. Any \
        changes will be lost if you leave this page.");
});

그런 다음 양식 제출을 허용하려면 다음을 수행하십시오.

$("#yourForm").on("submit", function(event) {
    enableNavigation();
});

동적으로 수정된 양식:

preventNavigation() 그리고 enableNavigation() 양식을 동적으로 수정하거나 AJAX 요청을 보내는 버튼을 클릭하는 등 필요에 따라 다른 기능에 바인딩될 수 있습니다.양식에 숨겨진 입력 요소를 추가하여 이 작업을 수행했습니다.

<input id="dummy_input" type="hidden" />

그런 다음 사용자가 다른 곳으로 이동하는 것을 방지하고 싶을 때마다 해당 입력에 대한 변경 사항을 트리거하여 다음을 확인합니다. preventNavigation() 실행됩니다 :

function somethingThatModifiesAFormDynamically() {

    // Do something that modifies a form

    // ...
    $("#dummy_input").trigger("change");
    // ...
}

여기 이것을 시도해 보세요. 100% 작동합니다. 

<html>
<body>
<script>
var warning = true;
window.onbeforeunload = function() {  
  if (warning) {  
    return "You have made changes on this page that you have not yet confirmed. If you navigate away from this page you will lose your unsaved changes";  
    }  
}

$('form').submit(function() {
   window.onbeforeunload = null;
});
</script>
</body>
</html>

사용자가 양식을 변경하기 시작하면 부울 플래그가 설정됩니다.그런 다음 사용자가 페이지에서 다른 곳으로 이동하려고 하면 window.onunload 이벤트.플래그가 설정된 경우 문자열로 반환하여 메시지를 표시합니다.메시지를 문자열로 반환하면 메시지가 포함된 확인 대화 상자가 팝업됩니다.

ajax를 사용하여 변경 사항을 커밋하는 경우 플래그를 다음과 같이 설정할 수 있습니다. false 변경 사항이 커밋된 후(예:Ajax 성공 이벤트에서).

그만큼 표준 상태 해당 메시지는 취소하여 제어할 수 있습니다. 언로드하기 전에 이벤트 또는 반환 값을 널이 아닌 값.또한 작성자는 returnValue 대신 Event.preventDefault()를 사용해야 하며 사용자에게 표시되는 메시지도 나와 있습니다. 맞춤설정할 수 없습니다..

69.0.3497.92 현재 Chrome은 표준을 충족하지 않습니다.그러나 버그 보고서 제출되었으며, 검토 진행 중입니다.Chrome에서는 핸들러에서 반환한 값이 아닌 이벤트 객체를 참조하여 returnValue를 설정해야 합니다.

변경이 이루어졌는지 추적하는 것은 작성자의 책임입니다.변수를 사용하거나 필요한 경우에만 이벤트가 처리되도록 하여 수행할 수 있습니다.

window.addEventListener('beforeunload', function (e) {
    // Cancel the event as stated by the standard.
    e.preventDefault();
    // Chrome requires returnValue to be set.
    e.returnValue = '';
});
    
window.location = 'about:blank';

다음을 추가할 수 있습니다. onchange JS에서 변수를 설정하는 텍스트 영역(또는 다른 필드)의 이벤트입니다.사용자가 페이지(window.onunload)를 닫으려고 하면 해당 변수의 값을 확인하고 그에 따라 경고를 표시합니다.

이 스레드의 모든 답변을 바탕으로 다음 코드를 작성했는데 효과가 있었습니다.

onunload 이벤트를 확인해야 하는 일부 입력/텍스트 영역 태그만 있는 경우 HTML5 데이터 속성을 다음과 같이 할당할 수 있습니다. data-onunload="true"

예를 들어.

<input type="text" data-onunload="true" />
<textarea data-onunload="true"></textarea>

Javascript(jQuery)는 다음과 같습니다.

$(document).ready(function(){
    window.onbeforeunload = function(e) {
        var returnFlag = false;
        $('textarea, input').each(function(){
            if($(this).attr('data-onunload') == 'true' && $(this).val() != '')
                returnFlag = true;
        });

        if(returnFlag)
            return "Sure you want to leave?";   
    };
});

여기 내 HTML이 있습니다 

<!DOCTYPE HMTL>
<meta charset="UTF-8">
<html>
<head>
<title>Home</title>
<script type="text/javascript" src="script.js"></script>
</head>

 <body onload="myFunction()">
    <h1 id="belong">
        Welcome To My Home
    </h1>
    <p>
        <a id="replaceME" onclick="myFunction2(event)" href="https://www.ccis.edu">I am a student at Columbia College of Missouri.</a>
    </p>
</body>

이것이 제가 JavaScript에서 비슷한 작업을 수행한 방법입니다.

var myGlobalNameHolder ="";

function myFunction(){
var myString = prompt("Enter a name", "Name Goes Here");
    myGlobalNameHolder = myString;
    if (myString != null) {
        document.getElementById("replaceME").innerHTML =
        "Hello " + myString + ". Welcome to my site";

        document.getElementById("belong").innerHTML =
        "A place you belong";
    }   
}

// create a function to pass our event too
function myFunction2(event) {   
// variable to make our event short and sweet
var x=window.onbeforeunload;
// logic to make the confirm and alert boxes
if (confirm("Are you sure you want to leave my page?") == true) {
    x = alert("Thank you " + myGlobalNameHolder + " for visiting!");
}
}

설정을 통해 쉽게 할 수 있습니다. 변경 플래그 사실로, 에 변경 시 이벤트 텍스트 영역.표시하려면 자바스크립트를 사용하세요. 확인하다 대화 상자는 변경 플래그 값.다음과 같은 경우 양식을 삭제하고 요청된 페이지로 이동하세요. 확인하다 true를 반환하고 그렇지 않으면 아무것도하지 마세요.

사용하려는 것은 JavaScript의 onunload 이벤트입니다.

예는 다음과 같습니다. http://www.w3schools.com/jsref/event_onunload.asp

body 태그에 대한 "onunload" 매개변수가 있으며 거기에서 자바스크립트 함수를 호출할 수 있습니다.false를 반환하면 다른 곳으로 이동하는 것이 방지됩니다.

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