웹 페이지가 JavaScript를 사용하여 다른 곳으로 이동하지 못하도록 방지

웹 페이지가 JavaScript를 사용하여 다른 곳으로 이동하지 못하도록 방지

웹 페이지가 자바스크립트를 사용하여 다른 곳으로 이동하는 것을 방지하는 방법?

사용.onunload메시지를 표시할 수 있지만 너무 늦었기 때문에 탐색을 중단하지는 않습니다.하지만 사용하는것은onbeforeunload탐색을 중단합니다.

window.onbeforeunload = function() {
  return "";
}

참고: 빈 문자열이 반환되는 이유는 최신 브라우저에서 "저장되지 않은 변경사항은 손실됩니다"와 같은 메시지를 제공하기 때문이며, 이 메시지는 무시할 수 없습니다.

이전 브라우저에서는 프롬프트에 표시할 메시지를 지정할 수 있습니다.

window.onbeforeunload = function() {
  return "Are you sure you want to navigate away?";
}

여기에 제시된 다른 방법과 달리, 이 코드 조각은 브라우저가 사용자가 떠나고 싶은지 묻는 경고를 표시하지 않게 합니다. 대신, 이 코드는 DOM의 이벤트가 발생한 특성을 이용하여 브라우저가 메모리에서 사용자를 언로드하기 전에 현재 페이지로 다시 리디렉션(따라서 탐색을 취소합니다.

탐색을 직접 단락하여 작동하므로 페이지가 닫히지 않도록 하는 데 사용할 수는 없지만 프레임 버스팅을 비활성화하는 데 사용할 수 있습니다.

(function () {
    var location = window.document.location;

    var preventNavigation = function () {
        var originalHashValue = location.hash;

        window.setTimeout(function () {
            location.hash = 'preventNavigation' + ~~ (9999 * Math.random());
            location.hash = originalHashValue;
        }, 0);
    };

    window.addEventListener('beforeunload', preventNavigation, false);
    window.addEventListener('unload', preventNavigation, false);
})();

면책 사항:절대로 이러면 안 됩니다.페이지에 프레임 버스팅 코드가 있다면 작성자의 뜻을 존중해 주시기 바랍니다.

현대적인 addEventListener API를 사용하여 보다 현대적이고 브라우저와 호환되는 방식으로 동등한 기능을 제공합니다.

window.addEventListener('beforeunload', (event) => {
  // Cancel the event as stated by the standard.
  event.preventDefault();
  // Chrome requires returnValue to be set.
  event.returnValue = '';
});

출처 : https://developer.mozilla.org/en-US/docs/Web/Events/beforeunload

저는 이 약간 다른 버전으로 끝이 났습니다.

var dirty = false;
window.onbeforeunload = function() {
    return dirty ? "If you leave this page you will lose your unsaved changes." : null;
}

다른 곳에서는 양식이 더러워지면 더러운 플래그를 true로 설정합니다(아니면 다른 곳으로 이동하는 것을 방지합니다).이를 통해 사용자가 탐색 확인 프롬프트를 받는지 여부를 쉽게 제어할 수 있습니다.

선택한 답변의 텍스트를 사용하면 중복 프롬프트가 나타납니다.

Ayman의 예에서는 false를 반환하여 브라우저 창/탭이 닫히지 않도록 합니다.

window.onunload = function () {
  alert('You are trying to leave.');
  return false;
}

jQuery 1.11의 수용된 답변에 해당합니다.

$(window).on("beforeunload", function () {
    return "Please don't leave me!";
});

JS Fiddle 예제

알트 코그니토의 대답은 다음을 사용했습니다.unload이벤트는 자바스크립트가 탐색을 중단하기에는 너무 늦게 발생합니다.

이 제안된 오류 메시지는 브라우저에 이미 표시된 오류 메시지를 복제할 수 있습니다.크롬에서는 같은 창에 두 개의 비슷한 오류 메시지가 차례로 표시됩니다.

크롬에서 사용자 지정 메시지 뒤에 표시되는 텍스트는 "이 페이지를 떠나시겠습니까?"입니다.파이어폭스에서는 사용자 지정 오류 메시지가 전혀 표시되지 않지만 대화 상자는 표시됩니다.

더 적절한 오류 메시지는 다음과 같습니다.

window.onbeforeunload = function() {
    return "If you leave this page, you will lose any unsaved changes.";
}

또는 스택 오버플로우 스타일: "게시물 작성 또는 편집을 시작했습니다."

브라우저 뒤로 가기/뒤로 가기 버튼을 선택하지 않으려면 다음을 사용할 수 있습니다.

window.addEventListener('popstate', function() {
    if (window.location.origin !== 'http://example.com') {
        // Do something if not your domain
    } else if (window.location.href === 'http://example.com/sign-in/step-1') {
        window.history.go(2); // Skip the already-signed-in pages if the forward button was clicked
    } else if (window.location.href === 'http://example.com/sign-in/step-2') {
        window.history.go(-2); // Skip the already-signed-in pages if the back button was clicked
    } else {
        // Let it do its thing
    }
});

그렇지 않으면 언로드 전 이벤트를 사용할 수 있지만 메시지가 크로스브라우저로 작동하거나 작동하지 않을 수 있으며 내장된 프롬프트를 강제로 반환해야 합니다.

언로드 시 사용합니다.

jQuery의 경우 다음과 같이 작동한다고 생각합니다.

$(window).unload(function() { 
  alert("Unloading"); 
  return falseIfYouWantToButBeCareful();
});

종료 시 알림 없음으로 상태를 다시 전환해야 하는 경우 다음 줄을 사용합니다.

window.onbeforeunload = null;

언급URL : https://stackoverflow.com/questions/821011/prevent-a-webpage-from-navigating-away-using-javascript