[javascript] 자바 스크립트를 사용하여 브라우저 뒤로 버튼을 중지하는 방법

PHP에서 온라인 퀴즈 앱을 만들고 있습니다. 사용자가 시험에 다시 들어 가지 못하도록 제한하고 싶습니다. 다음 스크립트를 시도했지만 타이머가 중지됩니다. 어떻게해야합니까?

소스 코드를 포함 시켰습니다. 타이머는 cdtimer.js에 저장됩니다

<script type="text/javascript">
        window.history.forward();
        function noBack()
        {
            window.history.forward();
        }
</script>
<body onLoad="noBack();" onpageshow="if (event.persisted) noBack();" onUnload="">

mysql 값 에서 시험 기간이 걸리는 시험 타이머가 있습니다. 타이머는 그에 따라 시작되지만 뒤로 버튼을 비활성화하기 위해 코드를 넣으면 중지됩니다. 내 문제는 무엇입니까?

답변

뒤로 버튼을 비활성화하면 실제로 작동하지 않는 데는 여러 가지 이유가 있습니다. 가장 좋은 방법은 사용자에게 경고하는 것입니다.

window.onbeforeunload = function() { return "Your work will be lost."; };

이 페이지에는 뒤로 버튼을 비활성화 할 수 있는 여러 가지 방법이 나열되어 있지만 보장되는 것은 없습니다.

http://www.irt.org/script/311.htm

답변

일반적으로 웹 브라우저의 기본 동작을 재정의하는 것은 좋지 않습니다. 클라이언트 측 스크립트에는 보안상의 이유로이를 수행 할 수있는 충분한 권한이 없습니다.

비슷한 질문이 거의 없습니다.

당신은 할 수-하지 실제로 해제 브라우저의 뒤로 버튼을 누릅니다. 그러나 사용자가 논리를 사용하여 마법을 사용하여 사용자가 다시 탐색하지 못하게하여 비활성화 된 것처럼 인상을 줄 수 있습니다. 다음은 스 니펫을 확인하는 방법입니다.

(function (global) {

    if(typeof (global) === "undefined") {
        throw new Error("window is undefined");
    }

    var _hash = "!";
    var noBackPlease = function () {
        global.location.href += "#";

        // making sure we have the fruit available for juice (^__^)
        global.setTimeout(function () {
            global.location.href += "!";
        }, 50);
    };

    global.onhashchange = function () {
        if (global.location.hash !== _hash) {
            global.location.hash = _hash;
        }
    };

    global.onload = function () {
        noBackPlease();

        // disables backspace on page except on input fields and textarea..
        document.body.onkeydown = function (e) {
            var elm = e.target.nodeName.toLowerCase();
            if (e.which === 8 && (elm !== 'input' && elm  !== 'textarea')) {
                e.preventDefault();
            }
            // stopping event bubbling up the DOM tree..
            e.stopPropagation();
        };
    }

})(window);

이것은 순수한 JavaScript로되어 있으므로 대부분의 브라우저에서 작동합니다. 또한 백 스페이스 키를 비활성화 하지만 키는 input필드 내에서 정상적으로 작동합니다 textarea.

권장 설정 :

이 스 니펫을 별도의 스크립트에 넣고이 동작을 원하는 페이지에 포함 시키십시오. 현재 설정에서는 onload이 코드의 이상적인 진입 점 인 DOM 이벤트를 실행 합니다.

데모 데모!

다음 브라우저에서 테스트 및 검증

크롬.
Firefox.
IE (8-11) 및 Edge.
원정 여행.

답변

나는 이것을 발견했고, 모바일 사파리 (포스팅시 iOS9)를 포함한 다양한 브라우저에서 정확하고 훌륭하게 작동하는 솔루션이 필요했다 . 해결책 중 어느 것도 옳지 않았습니다. IE11, FireFox, Chrome 및 Safari에서 테스트 한 내용은 다음과 같습니다.

history.pushState(null, document.title, location.href);
window.addEventListener('popstate', function (event)
{
  history.pushState(null, document.title, location.href);
});

다음에 유의하십시오.

history.forward()(나의 오래된 해결책)은 Mobile Safari에서 작동하지 않습니다 .- 아무것도하지 않는 것 같습니다 (즉, 사용자는 여전히 돌아갈 수 있습니다). history.pushState()그들 모두에 대해 작동합니다.
에 대한 세 번째 인수 history.pushState()는 url 입니다. 페이지에서 새로 고침 / 재로드를 시도 할 때까지 문자열을 전달 'no-back-button'하거나 'pagename'확인하는 것처럼 보이는 솔루션 은 브라우저가 해당 페이지를 URL로 찾으려고하면 “페이지를 찾을 수 없음”오류가 발생합니다. (브라우저는 페이지에있을 때 주소 표시 줄에 해당 문자열을 포함 할 가능성이 높습니다.)location.href URL에 사용해야합니다.
두 번째 인수 history.pushState()는 제목 입니다. 웹을 둘러 보면 대부분의 장소에서 “사용되지 않음”이라고 말하며 여기에있는 모든 솔루션이이를 통과 null합니다. 그러나 적어도 모바일 사파리에서는 페이지의 URL을 사용자가 액세스 할 수있는 기록 드롭 다운에 넣습니다. 그러나 일반적으로 페이지 방문에 대한 항목을 추가하면 title을 넣는 것이 좋습니다. 따라서 document.title그것을 통과 하면 동일한 행동이 발생합니다.

답변

<script>
window.location.hash="no-back-button";
window.location.hash="Again-No-back-button";//again because google chrome don't insert first hash into history
window.onhashchange=function(){window.location.hash="no-back-button";}
</script>

답변

이 코드는 HTML5 History API를 지원하는 최신 브라우저에서 뒤로 버튼을 비활성화합니다. 정상적인 상황에서 뒤로 단추를 누르면 한 단계 뒤로 이전 페이지로 돌아갑니다. history.pushState ()를 사용하면 현재 페이지에 추가 하위 단계를 추가하기 시작합니다. 작동 방식은 history.pushState ()를 세 번 사용한 다음 뒤로 버튼을 누르기 시작하면 처음 세 번은 이러한 하위 단계에서 다시 탐색 한 다음 네 번째로 돌아가는 것입니다. 이전 페이지.

이 동작을 이벤트의 이벤트 리스너와 결합하면 popstate기본적으로 무한한 하위 상태 루프를 설정할 수 있습니다. 따라서 페이지를로드하고 하위 상태를 누른 다음 뒤로 버튼을 누르면 하위 상태가 팝업되고 다른 상태도 푸시되므로 뒤로 버튼을 다시 누르면 하위 상태가 없어지지 않습니다. . 뒤로 버튼을 비활성화해야한다고 생각되면 여기로 이동합니다.

history.pushState(null, null, 'no-back-button');
window.addEventListener('popstate', function(event) {
  history.pushState(null, null, 'no-back-button');
});

답변

브라우저 백 이벤트 제한

window.history.pushState(null, "", window.location.href);
window.onpopstate = function () {
    window.history.pushState(null, "", window.location.href);
};

답변

    history.pushState(null, null, location.href);
    window.onpopstate = function () {
        history.go(1);
    };