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

155

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

javascript  browser 
— Sawant Akshay
소스
— Darshan Dixit

답변:

157

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

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

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

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

— 콜린
소스
답변이 이미 제출되어 있고 거부 된 경우 PHP 코드를 확인해야합니다.
— Sela Yair
4
최신 브라우저에서 상황이 바뀌 었다는 점은 언급 할 가치가 있습니다. stackoverflow.com/questions/19926641/…
— devrobf
126

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

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

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

(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.
  • 원정 여행.
— 로 히트 416
소스
1
왜 setTimeout인지 이해하지 못합니다. 처음에 #을 추가하면! setTimeout을 찾아서 제거해도 여전히 작동합니다.
— baraber
예 사실, 작동하지만 처음에 이것을했을 때 메모리에서 무언가를 기억해야한다면 ... 흐름은 다른 브라우저에서와 같이 크롬에서 제대로 작동하지 않았습니다. Chrome은 location.hash처음 에 빈을 반환하여 이렇게했습니다. 이것에 더 많은 개선이있을 수 있지만 50 ms는 한 번만 비용이 들지 않으므로 그대로 두었습니다.
— Rohit416
오, 그건 메모리 문제였습니다. 고맙습니다 :) 솔루션을 사용했지만 setInterval을 .onhashchange 핸들러로 바꿨습니다. 완벽하게 작동합니다. 하지만 다른 질문이 있습니다. 왜 "if (global.location.hash! = _hash)"? window.location.hash는 항상 '#'문자로 해시를 반환해야하며 _hash에는 '#'카 랙터가 포함되지 않기 때문에이 조건은 항상 참일 수 있다고 생각합니다. 당신은 그것에 대해 아무것도 기억하십니까? 브라우저가 location.hash에서 '#'문자를 반환하지 않을 경우를 대비하여 보호하는 것입니까?
— baraber
권장대로 .js 파일을 만들고 다음을 사용하여 코드에 js 파일을 포함 시켰습니다. <script src = "./ javascript / noback.js"> </ script>하지만 여전히 Safari를 사용하여 뒤로를 수행 할 수 있습니다. 내가 무엇을 놓치고 있습니까? 이 라이브러리는 내가 사용하는 다른 라이브러리와 같은 방식으로 추가되었으므로 포함이 좋습니다.
— Tim
1
ipad air, ios 8의 뒤로 단추 차단
— 플러그인 컨테이너
75

나는 이것을 발견했고, 모바일 사파리 (포스팅시 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그것을 통과 하면 동일한 행동이 발생합니다.
— 존 브레이브
소스
3
이것이 정답입니다. Chrome, IE 11, Firefox 및 Edge에서 완벽하게 작동합니다.
— Concept211
3
이것은 받아 들일만한 대답이어야하며, 크로스 플랫폼이며 제대로 작동합니다.
— calbertts 2016 년
jsp sevlet에서 제출 후 페이지를 새로 고칩니다. 페이지가 아닌 디스플레이 (오류)
— Madhuka Dilhan
지금까지 최고의 솔루션이지만 이전 브라우저에서는 작동하지 않을 수 있습니다.
— j4n7
2
최신 브라우저를위한 완벽한 솔루션. @ Rohit416 답변과 결합하여 conditionofof (history.pushState) === "function"작업을 사용하여 이전 브라우저를 지원합니다.
— Miklos Krivan
74 
<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>
— vrfvr
소스
3
천재! 뒤로 / 앞으로가 실제로 이해가되지 않는 웹 응용 프로그램에서 사용자가 백 스페이스 (예 : 비활성화 된 / 읽기 전용 필드에서)를 칠 때 실수로 뒤로 버튼이 트리거되는 것을 방지하기 위해 이것을 사용했습니다. 확인은 컨텍스트 메뉴 옵션을 포함하여 뒤로 및 앞으로 기능 (버튼 자체는 아님)을 비활성화합니다. IE11, Chrome 및 FF를 통해 IE8에서 확인되었습니다.
— 아무것도 불필요
1
작동하지만 텍스트 상자에 입력 한 모든 데이터를 재설정합니다. 지우기를 방지 할 수 있습니까?
— Somnium
6
파이어 폭스에서는 나를 위해 일했지만 크롬에서는 나에게 도움이되지 않았습니다 (버전 36.0.1985.143)
— baraber
이것은 나에게도 효과가 있었지만 Firefox에서는 window.history.back()기능 이 작동 하지 않는 것 같습니다 . 사용자가 브라우저 뒤로 버튼을 클릭하는 것을 방지하고 싶지만 경우에 따라 페이지에 자체 뒤로 버튼을 제공합니다. 작동시키는 방법이 있습니까?
— AsGoodAsItGets
1
이것은 나를 위해 작동하지 않습니다. Windows 10에서 Chrome 버전 55를 사용하고 있습니다. 스크립트를 여러 위치 (헤더 시작, 본문 끝 등)에 배치했지만 뒤로 버튼을 사용하여 이전 페이지로 돌아갈 수 있습니다.
— 빅터 스토 다드
28

이 코드는 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');
});
— 제레미 워네
소스
2
모든 브라우저에서이 후 페이지 새로 고침 / 다시로드를 시도하면 이름이 no-back-button... 인 페이지를 찾으려고하면 "페이지를 찾을 수 없음"오류가 발생합니다 (브라우저도 no-back-button주소 에 표시 될 수 있음) 공평하게 말하면, 이것이 여기에서 겪는 유일한 해결책은 아닙니다. 에 제 3 인수는 history.pushState()A는 URL , 및 현재 페이지의 URL이어야합니다 : 사용하는 location.href대신.
— JonBrave
4
이것은 나를 위해 일했습니다. 그냥 변화 "+ window.top.location.search window.top.location.pathname"에 '더 백 없다 버튼'과 심지어 새로 고침, 당신은에있는 페이지의 이름 남아있을 것입니다
— 스티브
무엇보다도 이것은 나를 위해 일했습니다. stackoverflow.com/questions/19926641/…을 참조하십시오 .
— user2171669
많은 사례를 살펴 보았으며 이것이 1 페이지 사이트를위한 최상의 솔루션입니다.
— djdance
URL을 변경하고 있기 때문에 이것은 매우 나쁜 해결책입니다. 따라서 뒤로 몇 번 치고 앞으로 이동하면 크롬이 존재하지 않는 경로로 리디렉션됩니다
— Tallboy
21

브라우저 백 이벤트 제한

window.history.pushState(null, "", window.location.href);
window.onpopstate = function () {
    window.history.pushState(null, "", window.location.href);
};
— 페잘 할라이
소스
1
이것은 크롬에서 훌륭하게 작동합니다! 왜 사람들이 투표하지 않는 것이 가장 좋은 대답입니까?
— Tarık Seyceri
1
방금 다음 브라우저에서 Windows 10 OS를 사용하여 테스트했습니다 (작동합니다). 3355.0 (개발자 빌드) (64 비트) Firefox 66.0.3 (64 비트) EDGE IE 11 Safari 5.1.7
— Tarekk Seyceri
2
TarıkSeyceri @이 단지) 페이지가 실제로 상태를 관리하는 이력 API를 사용하는) 역사 API의 B를 지원하는 것으로 브라우저에서 작동하기 때문에
— givanse
버전 75 이후 Chrome에서 더 이상 작동하지 않습니다. support.google.com/chrome/thread/8721521?hl=ko
— 유전자 b를
13 

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

— 엥 마흐무드 엘 토리
소스
12
이것이 정답 일 수 있지만 코드의 기능과 작동 방식을 설명하여 다른 사람들을 도울 가능성이 훨씬 높습니다. 코드 전용 답변은 긍정적 인 관심을 덜받는 경향이 있으며 다른 답변만큼 유용하지 않습니다.
— Aurora0001
Chrome, Firefox, IE 및 Edge에서 테스트되었습니다. 잘 작동한다. 넌 나를 구했다.
— Nooovice Boooy
12

이것이 내가 그것을 달성 할 수있는 방법입니다. Chrome 및 Safari에서 위치를 제대로 변경하지 못했습니다. location.hash가 크롬 및 사파리의 히스토리에 항목을 작성하지 않습니다. 따라서 pushstate를 사용해야합니다. 이것은 모든 브라우저에서 저에게 효과적입니다.

    history.pushState({ page: 1 }, "title 1", "#nbb");
    window.onhashchange = function (event) {
        window.location.hash = "nbb";

    };
— 산 치토스
소스
1
IE9 이하에서는 작동하지 않으며 pushState는 지원되지 않습니다.
— Alex
큰. 이것은 좋은 접근 방식이며 거의 모든 최신 브라우저에서 작동합니다.
— Venugopal M 2013
1
나중에 IE에서 잘 작동합니다. document.ready에 직접 넣으십시오. $(document).ready(function () { .... });
— Oppa Gingham Style
"#nbb"전에 현재 URI를 추가해야합니다. "account # nbb"
— Mladen Janjetovic
9 
<html>
<head>
    <title>Disable Back Button in Browser - Online Demo</title>
    <style type="text/css">
        body, input {
            font-family: Calibri, Arial;
        }
    </style>
    <script type="text/javascript">
        window.history.forward();
        function noBack() {
            window.history.forward();
        }
    </script>
</head>
<body onload="noBack();" onpageshow="if (event.persisted) noBack();" onunload="">
    <H2>Demo</H2>
    <p>This page contains the code to avoid Back button.</p>
    <p>Click here to Goto <a href="noback.html">NoBack Page</a></p>
</body>
</html>
— 애쉬 윈 패틸
소스
어딘가에 대한 문서가 event.persisted있습니까?
— Muhd
1
귀하의 질문에 대한 링크가 있습니다. 이 찾기 여기 @Muhd
— rbashish
방금이 작업을 시도했지만 작동하지 않습니다
— Pedro Joaquín
8

jordanhollinger.com에 관한이 기사 는 내가 느끼는 최고의 옵션입니다. 면도기의 대답과 비슷하지만 조금 더 명확합니다. 아래 코드; Jordan Hollinger에 대한 전체 크레딧 :

이전 페이지 :

<a href="/page-of-no-return.htm#no-back>You can't go back from the next page</a>

반환되지 않은 JavaScript 페이지 :

// It works without the History API, but will clutter up the history
var history_api = typeof history.pushState !== 'undefined'

// The previous page asks that it not be returned to
if ( location.hash == '#no-back' ) {
  // Push "#no-back" onto the history, making it the most recent "page"
  if ( history_api ) history.pushState(null, '', '#stay')
  else location.hash = '#stay'

  // When the back button is pressed, it will harmlessly change the url
  // hash from "#stay" to "#no-back", which triggers this function
  window.onhashchange = function() {
    // User tried to go back; warn user, rinse and repeat
    if ( location.hash == '#no-back' ) {
      alert("You shall not pass!")
      if ( history_api ) history.pushState(null, '', '#stay')
      else location.hash = '#stay'
    }
  }
}
— dav_i
소스
8 
history.pushState(null, null, document.URL);
window.addEventListener('popstate', function () {
    history.pushState(null, null, document.URL);
});

이 자바 스크립트는 사용자가 되돌아 갈 수 없도록합니다 (Chrome, FF, IE, Edge에서 작동)

— 수 라지 트 미트라
소스
5

쉽게 사용해보십시오 :

history.pushState(null, null, document.title);
window.addEventListener('popstate', function () {
    history.pushState(null, null, document.title);
});
— 라칸
소스
5

이 코드는 최신 Chrome 및 Firefox 브라우저에서 테스트되었습니다.

    <script type="text/javascript">
        history.pushState(null, null, location.href);
        history.back();
        history.forward();
        window.onpopstate = function () { history.go(1); };
    </script>
— 프랭클린 무고한 F
소스
huyhoang에 오신 것을 환영합니다.
— Franklin Innocent F
3

나중에 페이지를 방해하지 않고 뒤로 화살표를 끊는 매우 간단하고 깨끗한 기능.

혜택:

  • 즉시로드하고 원래 해시를 복원하므로 사용자가 URL을 눈에 띄게 변경하여주의를 분산시키지 않습니다.
  • 사용자는 여전히 10 번 뒤로 밀면 종료 할 수 있지만 실수는 아닙니다.
  • 사용하는 다른 솔루션과 같은 사용자 간섭 없음 onbeforeunload
  • 한 번만 실행되며 상태를 추적하는 데 사용하는 경우 추가 해시 조작을 방해하지 않습니다.
  • 거의 보이지 않는 원래 해시를 복원합니다.
  • setInterval느린 브라우저를 중단하지 않고 항상 작동하도록 사용 합니다.
  • 순수한 Javascript는 HTML5 히스토리가 필요하지 않으며 어디에서나 작동합니다.
  • 눈에 거슬리지 않고 단순하며 다른 코드와 잘 어울립니다.
  • 사용하지 않습니다 unbeforeunload모달 대화 상자에서 사용자를 방해하는 .
  • 그것은 소란없이 작동합니다.

참고 : 다른 솔루션 중 일부는을 사용 onbeforeunload합니다. 제발 하지 않는 사용 onbeforeunload과 같은 조동사 사용자가 창을 닫으려고 할 때마다 대화 상자가 팝업이 목적, 히트 backarrow 등을 위해onbeforeunload 실제로 화면 천국에 변경 한 경우 '와 같은 보통 드문 경우에 적합 이 목적을 위해서가 아니라 그들을 구했습니다.

작동 원리

  1. 페이지로드시 실행
  2. 원래 해시를 저장합니다 (URL에있는 경우).
  3. # / noop / {1..10}을 해시에 순차적으로 추가
  4. 원래 해시를 복원

그게 다야. 더 이상 혼란스럽지 않고 백그라운드 이벤트 모니터링도 없으며 다른 것도 없습니다.

1 초에 사용

배포하려면 페이지 또는 JS의 아무 곳에 나 추가하십시오.

<script>
/* break back button */                                                                        
window.onload=function(){                                                                      
  var i=0; var previous_hash = window.location.hash;                                           
  var x = setInterval(function(){                                                              
    i++; window.location.hash = "/noop/" + i;                                                  
    if (i==10){clearInterval(x);                                                               
      window.location.hash = previous_hash;}                                                   
  },10);
}
</script>
— 치명적 오류
소스
2

이것은 브라우저에서 뒤로 버튼과 비활성화하는 백 스페이스 버튼을 비활성화하는 데 도움이 된 것으로 보입니다. 

history.pushState(null, null, $(location).attr('href'));
    window.addEventListener('popstate', function () {
        history.pushState(null, null, $(location).attr('href'));
    });
— ga
소스
1 
   <script src="~/main.js" type="text/javascript"></script>
    <script type="text/javascript">
        window.history.forward();
        function noBack() { window.history.forward(); } </script>
— 사용자 3789888
소스
1

당신은 단순히 이것을 할 수없고해서는 안됩니다. 그러나 이것은 도움이 될 수 있습니다

<script type = "text/javascript" >
history.pushState(null, null, 'pagename');
window.addEventListener('popstate', function(event) {
history.pushState(null, null, 'pagename');
});
</script>

크롬 및 파이어 폭스에서 작동

— 샤일 렌드 라 샤르마
소스
1

IE에서 백 스페이스 버튼이 기본적으로 "뒤로"로 작동하지 않도록하려면 다음을 시도하십시오.

<script language="JavaScript">
$(document).ready(function() {
$(document).unbind('keydown').bind('keydown', function (event) {
    var doPrevent = false;


    if (event.keyCode === 8 ) {
        var d = event.srcElement || event.target;
        if ((d.tagName.toUpperCase() === 'INPUT' && 
             (
                 d.type.toUpperCase() === 'TEXT' ||
                 d.type.toUpperCase() === 'PASSWORD' || 
                 d.type.toUpperCase() === 'FILE' || 
                 d.type.toUpperCase() === 'EMAIL' || 
                 d.type.toUpperCase() === 'SEARCH' || 
                 d.type.toUpperCase() === 'DATE' )
             ) || 
             d.tagName.toUpperCase() === 'TEXTAREA') {
            doPrevent = d.readOnly || d.disabled;
        }
        else {

            doPrevent = true;
        }
    }

    if (doPrevent) {
        event.preventDefault();
    }

    try {
        document.addEventListener('keydown', function (e) {
               if ((e.keyCode === 13)){
                  // alert('Enter keydown');
                   e.stopPropagation();
                   e.preventDefault();
               }



           }, true);
        } catch (err) {}
    });
});
</script>
— 아짓 캄블
소스
1

나는 완벽한 아직 솔루션이 실제로 매우 간단하다고 생각합니다.

기본적으로 진행중인 문서 'mouseenter'/ 'mouseleave'이벤트와 함께 창의 "onbeforeunload"이벤트를 할당하므로 클릭이 문서 범위를 벗어난 경우에만 경고가 트리거됩니다 (브라우저의 뒤로 또는 앞으로 버튼 일 수 있음).

$(document).on('mouseenter', function(e) { 
        window.onbeforeunload = null; 
    }
);

$(document).on('mouseleave', function(e) { 
        window.onbeforeunload = function() { return "You work will be lost."; };
    }
);
— Abdelqoddous Rifai
소스
1

최신 브라우저에서는 다음과 같이 작동합니다.

// https://developer.mozilla.org/en-US/docs/Web/API/History_API
let popHandler = () => {
  if (confirm('Go back?')) {
    window.history.back() 
  } else {
    window.history.forward()
    setTimeout(() => {
      window.addEventListener('popstate', popHandler, {once: true})
    }, 50) // delay needed since the above is an async operation for some reason
  }
}
window.addEventListener('popstate', popHandler, {once: true})
window.history.pushState(null,null,null)
— 호 아킴 엘 크리스천 슨
소스
1
무슨 일이 일어 났는지 확실하지 않지만 어떤 이유로 든 다른 컴퓨터 에서이 답변을 하향 조정했습니다. 그냥 당신이 내 의도가 아니었다 알려 주셔서,하지만 난 더 이상 투표를 취소 할 수 없습니다 : /
— 레너드 Fonteijn
어떤 감정 @LennardFonteijn : 해치지
— 조아킴 L. 크리스티안
1

Chrome 79 에서 가장 잘 응답 된 답변이 없습니다. . Chrome이 버전 75 이후의 뒤로 버튼과 관련하여 동작을 변경 한 것으로 보입니다. 여기를 참조하십시오.

https://support.google.com/chrome/thread/8721521?hl=ko

그러나 Google 스레드에서 Azrulmukmin Azmi가 제공 한 답변이 효과가있었습니다. 이것이 그의 해결책입니다.

<script>

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

</script>

Chrome의 문제는 브라우저 작업을 수행하지 않으면 (예 : 통화 기록 .back) onpopstate 이벤트를 트리거하지 않는다는 것입니다. 그래서 스크립트에 스크립트를 추가했습니다.

나는 그가 쓴 것을 완전히 이해하지 못하지만 history.back() / history.forward()Chrome 75 이상에서 Back을 차단하려면 추가 항목 이 필요합니다.

— 유전자 b.
소스
높고 낮은 검색 후 마침내 안드로이드 브라우저에서도 작동했습니다. 어떤 이유로 브라우저의 뒤로 버튼 이벤트가 다른 스크립트로 감지되지 않았습니다. 고마워 고마워 또 고마워 데스크톱과 모바일 모두 Chrome 83에서 테스트되고 제대로 작동합니다! 진, 당신은 생명의 은인입니다!
— Ivan
0

하나의 HTML 페이지 (index.html)를 만듭니다. 또한 (script) 폴더 / 디렉토리 안에 하나 (mechanism.js)를 만듭니다. 그런 다음 필요에 따라 form, table, span 및 div 태그를 사용하여 모든 컨텐츠를 (index.html) 안에 배치합니다. 자, 여기 뒤로 / 앞으로 아무것도하지 않는 속임수가 있습니다!

첫째, 페이지가 하나만 있다는 사실! 둘째, 일반 링크를 통해 필요할 때 span / div 태그와 함께 JavaScript를 사용하여 동일한 페이지에서 컨텐츠를 숨기고 표시합니다!

'index.html'내부 :

    <td width="89px" align="right" valign="top" style="letter-spacing:1px;">
     <small>
      <b>
       <a href="#" class="traff" onClick="DisplayInTrafficTable();">IN</a>&nbsp;
      </b>
     </small>
     [&nbsp;<span id="inCountSPN">0</span>&nbsp;]
    </td>

내부 'mechanism.js':

    function DisplayInTrafficTable()
    {
     var itmsCNT = 0;
     var dsplyIn = "";
     for ( i=0; i<inTraffic.length; i++ )
     {
      dsplyIn += "<tr><td width='11'></td><td align='right'>" + (++itmsCNT) + "</td><td width='11'></td><td><b>" + inTraffic[i] + "</b></td><td width='11'></td><td>" + entryTimeArray[i] + "</td><td width='11'></td><td>" + entryDateArray[i] + "</td><td width='11'></td></tr>";
     }
     document.getElementById('inOutSPN').innerHTML = "" +
                                             "<table border='0' style='background:#fff;'><tr><th colspan='21' style='background:#feb;padding:11px;'><h3 style='margin-bottom:-1px;'>INCOMING TRAFFIC REPORT</h3>" + DateStamp() + "&nbsp;&nbsp;-&nbsp;&nbsp;<small><a href='#' style='letter-spacing:1px;' onclick='OpenPrintableIn();'>PRINT</a></small></th></tr><tr style='background:#eee;'><td></td><td><b>###</b></td><td></td><td><b>ID #</b></td><td></td><td width='79'><b>TYPE</b></td><td></td><td><b>FIRST</b></td><td></td><td><b>LAST</b></td><td></td><td><b>PLATE #</b></td><td></td><td><b>COMPANY</b></td><td></td><td><b>TIME</b></td><td></td><td><b>DATE</b></td><td></td><td><b>IN / OUT</b></td><td></td></tr>" + dsplyIn.toUpperCase() + "</table>" +
                                             "";
     return document.getElementById('inOutSPN').innerHTML;
    }

털이 보이지만 함수 이름 및 호출, 포함 된 HTML 및 span 태그 id 호출에 유의하십시오. 이것은 같은 페이지의 동일한 스팬 태그에 다른 HTML을 삽입하는 방법을 보여주기위한 것입니다! 뒤로 / 앞으로이 디자인에 어떤 영향을 줄 수 있습니까? 같은 페이지에서 객체를 숨기고 다른 객체를 교체하기 때문에 불가능합니다!

숨기고 표시하는 방법? 필요에 따라 'mechanism.js'의 함수 내부에서 다음을 사용하십시오.

    document.getElementById('textOverPic').style.display = "none"; //hide
    document.getElementById('textOverPic').style.display = "";     //display

링크를 통한 'index.html'호출 함수 내부 :

    <img src="images/someimage.jpg" alt="" />
    <span class="textOverPic" id="textOverPic"></span>

과

    <a href="#" style="color:#119;font-size:11px;text-decoration:none;letter-spacing:1px;" onclick="HiddenTextsManager(1);">Introduction</a>

나는 당신에게 두통을주지 않기를 바랍니다. 내가 한 경우 죄송합니다 :-)

— 해커 1033
소스
0

제 경우에는 이것이 쇼핑 주문이었습니다. 그래서 내가 한 것은 버튼을 비활성화하는 것입니다. 사용자가 다시 클릭해도 버튼은 여전히 ​​비활성화되어 있습니다. 한 번 더 뒤로 클릭 한 다음 페이지 버튼을 클릭하여 계속 진행합니다. 주문이 제출되어 다른 페이지로 건너 뛰는 것을 알았습니다.

페이지가 실제로 새로 고쳐 져서 (이론적으로) 버튼을 사용할 수있는 경우; 그런 다음 주문이 이미 제출되었다는 페이지로드에서 반응하고 다시 리디렉션 할 수있었습니다.

— 발라 마
소스
0 
<script language="JavaScript">
    javascript:window.history.forward(1);
</script>
— 캄 레쉬
소스
3
1. javascript:작성한 "javascript"라는 JavaScript 레이블을 정의했습니다 . 나는 당신이 그 의도를 의심했다; href=javascript:...JavaScript <script>블록 과 섞여 있다고 생각합니다 . 2. HTML5에서 language="JavaScript"유효한 <script>속성이 중지되었습니다 . 3. 위의 2 가지 점은별로 중요하지 않습니다. 중요한 것은 history.forward(1)Mobile Safari에서 작동하지 않는 것입니다 (적어도). history.pushState()대신 답 중 하나를 사용하십시오 .
— JonBrave
0

작은 스크립트를 넣은 다음 확인할 수 있습니다. 이전 페이지를 방문 할 수 없습니다. 이것은 자바 스크립트에서 수행됩니다.

<script type="text/javascript">
    function preventbackbutton() { window.history.forward(); }
    setTimeout("preventbackbutton()", 0);
    window.onunload = function () { null };
</script>

window.onunload 함수는 브라우저를 통해 이전 또는 이전 페이지를 방문하려고하면 실행됩니다.

도움이 되었기를 바랍니다.

— 멍청한 프로그래머
소스
0

React.JS 에서이 문제가 발생했습니다. (클래스 컴포넌트)

그리고 쉽게 해결

componentDidMount(){
   window.addEventListener("popstate", e=> {
      this.props.history.goForward();
   }
}

HashRouter에서 사용 했습니다 react-router-dom.

— 우
소스
0

그냥 설정 location.hash="Something", 뒤로 버튼을 누르면 해시가 URL에서 제거되지만 페이지가 되돌아 가지 않습니다.이 방법은 실수로 되돌아 가지 않도록하는 데 좋지만 보안상의 이유로 다시 응답하지 않도록 백엔드를 디자인해야합니다

— 아비 셰크
소스
-1 
//"use strict";
function stopBackSpace(e) {
    var ev = e || window.event;
    var obj = ev.target || ev.srcElement;
    var t = obj.type || obj.getAttribute('type');

    var vReadOnly = obj.getAttribute('readonly');
    var vEnabled = obj.getAttribute('enabled');
    // null
    vReadOnly = (vReadOnly == null) ? false : vReadOnly;
    vEnabled = (vEnabled == null) ? true : vEnabled;
    // when click Backspace,judge the type of obj.

    var flag1 = ((t == 'password' || t == 'text' || t == 'textarea') && ((vReadOnly == true || vReadOnly == 'readonly') || vEnabled != true)) ? true : false;

    var flag2 = (t != 'password' && t != 'text' && t != 'textarea') ? true : false;

    if (flag2) {
        e.keyCode = 0;
        e.cancelBubble = true;
        return false;
    }
    if (flag1) {
        e.keyCode = 0;
        e.cancelBubble = true;
        return false;
    }
}
if (typeof($) == 'function') {
    $(function() {
        $(document).keydown(function(e) {
            if (e.keyCode == 8) {
                return stopBackSpace(e);
            }
        });
    });
} else {
    document.onkeydown = stopBackSpace;
}
— 천시 중
소스
1 이벤트 오브젝트 2를 확보하여 판단 조건으로 이벤트 소스 유형을 판별하십시오. 3. 백 스페이스에 도달하면 암호 또는 단일 이벤트 소스 유형 및 읽기 전용 특성이 true 또는 enabled 특성 인 경우 백 스페이스 키가 실패합니다. 백 스페이스에 도달하면 이벤트 소스가 비밀번호 또는 단일 유형 인 백 스페이스 키 실패입니다
— Chauncey.Zhong
백 스페이스 키가 아닌 뒤로 탐색 버튼 사용에 대한 질문입니다.
— Quentin
당사 사이트를 사용함과 동시에 당사의 쿠키 정책과 개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.