JavaScript를 사용하여 웹 페이지가 탐색하는 것을 방지합니다

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

  •  03-07-2019
  •  | 
  •  

문제

JavaScript를 사용하여 웹 페이지가 탐색하는 것을 방지하는 방법은 무엇입니까?

도움이 되었습니까?

해결책

사용 onunload 메시지 만 표시 할 수 있지만 내비게이션을 방해하지 않습니다 (너무 늦기 때문에). 그러나 사용할 수 있습니다 onbeforeunload 내비게이션을 중단합니다.

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

편집하다: 제거됨 confirm() 이로 인해 반환 명령문에서 예상대로 확인 창이 발생했지만 첫 번째 확인 결과에 따라 두 번째 확인도 보여주었습니다.

다른 팁

여기에 제시된 다른 방법과 달리이 코드는 ~ 아니다 브라우저가 사용자에게 떠나고 싶은지 묻는 경고를 표시하게합니다. 대신, 브라우저가 메모리에서 언로드 할 수있는 기회를 갖기 전에 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);
})();

부인 성명: 당신은 이것을하지 않아야합니다. 페이지에 프레임 버스트 코드가있는 경우 저자의 소원을 존중하십시오.

나는이 약간 다른 버전으로 끝났다.

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

다른 곳에서는 양식이 더러워지면 더러운 깃발을 true로 설정했습니다 (또는 그렇지 않으면 탐색을 방지하고 싶습니다). 이를 통해 사용자가 확인 내비게이션 프롬프트를 받는지 쉽게 제어 할 수 있습니다.

선택한 답변의 텍스트를 사용하면 중복 프롬프트가 표시됩니다.

enter image description here

Ayman의 예에서 False를 반환하여 브라우저 창/탭이 닫히는 것을 방지합니다.

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

최신 AddeventListener API를 사용하여보다 현대적이고 브라우저 호환 방법에 해당합니다.

window.addEventListener("beforeunload", function (e) {
  var confirmationMessage = "\o/";

  e.returnValue = confirmationMessage;     // Gecko and Trident
  return confirmationMessage;              // Gecko and WebKit
});

원천: https://developer.mozilla.org/en-us/docs/web/events/beforeunload

jQuery 1.11의 허용 된 답변과 동일합니다.

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

JSFIDDLE 예제

Altcognito의 대답은 unload JavaScript가 내비게이션을 중단하기에는 너무 늦게 발생합니다.

사용 onunload.

jQuery의 경우, 나는 이것이 그렇게 작동한다고 생각합니다.

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

제안 된 오류 메시지는 브라우저가 이미 표시 한 오류 메시지를 복제 할 수 있습니다. Chrome에서는 2 개의 유사한 오류 메시지가 동일한 창에 차례로 표시됩니다.

Chrome에서 사용자 정의 메시지 다음에 표시된 텍스트는 "이 페이지를 떠나고 싶습니까?"입니다. Firefox에서는 사용자 정의 오류 메시지를 전혀 표시하지 않지만 대화 상자가 표시됩니다).

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

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

또는 stackoverflow 스타일 : "당신은 게시물을 작성하거나 편집하기 시작했습니다."

당신이 잡고 있다면 브라우저 백/전진 버튼 그리고 탐색하고 싶지 않으면 사용할 수 있습니다.

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
    }
});

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

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