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 값에서 시험 기간이 걸리는 시험 타이머가 있습니다.타이머는 그에 따라 시작되지만, Back 버튼을 비활성화하기 위한 코드를 입력하면 정지됩니다.내 문제가 뭐야?
뒤로 버튼을 비활성화할 수 없는 이유는 여러 가지가 있습니다.사용자에게 경고하는 것이 가장 좋습니다.
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 the event bubbling up the DOM tree...
e.stopPropagation();
};
}
})(window);
이것은 순수 자바스크립트로 되어 있기 때문에 대부분의 브라우저에서 동작합니다.백스페이스 키도 사용할 수 없게 됩니다만, 그 키는 안에서 정상적으로 동작합니다.input 및 " " "textarea.
권장 설정:
이 스니펫을 다른 스크립트에 배치하여 이 동작을 원하는 페이지에 포함시킵니다.에서는, 「실행할 수 없다」가 됩니다.onloadDOM 입니다.
다음 브라우저에서 테스트 및 검증되었습니다.
- 크롬.
- 파이어폭스
- Internet Explorer(8-11) 및 Edge.
- 사파리.
Mobile Safari(포스팅 시 iOS 9)를 포함한 다양한 브라우저에서 올바르게 동작하고 "좋게" 동작하는 솔루션이 필요했기 때문에 이 사실을 알게 되었습니다.어떤 해결책도 정확하지 않았다.다음을 제공합니다(Internet Explorer 11, Firefox, Chrome 및 Safari에서 테스트됨).
history.pushState(null, document.title, location.href);
window.addEventListener('popstate', function (event)
{
history.pushState(null, document.title, location.href);
});
다음의 점에 주의해 주세요.
history.forward()모바일 사파리아무것도 하지 않는 것 같습니다(사용자는 돌아갈 수 있습니다).history.pushState()모두 효과가 있습니다.-
history.pushState()는 URL 입니다.다음과 같은 문자열을 전달하는 솔루션'no-back-button'★★★★★★★★★★★★★★★★★」'pagename'페이지에서 새로 고침/새로고침을 시도할 때까지 정상적으로 동작하는 것 같습니다.이 시점에서 브라우저가 URL로 지정된 페이지를 검색하려고 하면 "페이지를 찾을 수 없습니다" 오류가 발생합니다(또한 브라우저는 페이지에 있을 때 해당 문자열을 주소 표시줄에 포함할 가능성이 높으며, 이는 보기 흉합니다).location.href에 합니다. -
history.pushState()제목입니다.웹을 둘러보면 대부분 사용되지 않는 것으로 나타나며, 여기 있는 모든 솔루션은 합격입니다.null그럴 수 있어요.단, Mobile Safari에서는 적어도 페이지 URL이 사용자가 접근할 수 있는 이력 드롭다운에 들어갑니다.그러나 일반적으로 페이지 방문 항목을 추가할 때 제목(권장)을 넣습니다.그래서 지나간다document.title그 결과 같은 행동을 하게 됩니다.
<script>
window.location.hash = "no-back-button";
// Again because Google Chrome doesn't insert
// the first hash into the history
window.location.hash = "Again-No-back-button";
window.onhashchange = function(){
window.location.hash = "no-back-button";
}
</script>
브라우저 백이벤트를 제한하는 경우:
window.history.pushState(null, "", window.location.href);
window.onpopstate = function () {
window.history.pushState(null, "", window.location.href);
};
이 코드는 HTML5 History API를 지원하는 최신 브라우저의 뒤로 버튼을 비활성화합니다.통상적인 상황에서는 뒤로 버튼을 누르면 이전 페이지로 한 단계 돌아갑니다.history.pushState()를 사용하는 경우 현재 페이지에 추가 서브스텝을 추가하기 시작합니다.동작방법은 history.pushState()를 3회 사용한 후 뒤로 버튼을 누르기 시작하면 처음 3회 이 서브스텝에서 네 번째 페이지로 돌아갑니다.
popstate이벤트에서는 기본적으로 서브스테이트의 무한 루프를 설정할 수 있습니다.페이지를 로드하고 서브스테이트를 누른 다음 뒤로 버튼을 누르면 서브스테이트가 팝업되고 다른 서브스테이트가 눌러집니다.그러면 다시 버튼을 눌러도 서브스테이트가 부족해지는 일은 없습니다.[돌아가기] 버튼을 비활성화해야 한다고 생각되는 경우 이 버튼을 누르면 해당됩니다.
history.pushState(null, null, 'no-back-button');
window.addEventListener('popstate', function(event) {
history.pushState(null, null, 'no-back-button');
});
역방향 기능을 차단하는 방법:
history.pushState(null, null, location.href);
window.onpopstate = function () {
history.go(1);
};Chrome 79에서는 가장 많이 올라온 답변이 하나도 작동하지 않았습니다.Chrome은 버전 75 이후 Back 버튼에 대한 동작을 변경한 것 같습니다.여기를 참조해 주세요.
https://support.google.com/chrome/thread/8721521?hl=en
그러나 구글 스레드에서는 맨 마지막에 Azrulmukmin Azmi가 제공한 답변이 효과가 있었다.이게 그의 해결책이야
<script>
history.pushState(null, document.title, location.href);
history.back();
history.forward();
window.onpopstate = function () {
history.go(1);
};
</script>
Chrome의 문제는 브라우저 조작(즉, call history.back)을 하지 않는 한 on popstate 이벤트를 트리거하지 않는다는 것입니다.그래서 대본에 추가해놨어요
쓴 글은 완전히할 수 없지만, 쓴 것 .history.back() / history.forward()Chrome 75+로 되돌아가다.
이게 내가 할 수 있는 방법이야.
이상하게도 구글 크롬과 사파리에서 window.location을 변경하는 것이 잘 되지 않았습니다.
그 장소에서는 일어날 수 있다.해시를 지정해도 Chrome 및 Safari 이력에는 엔트리가 생성되지 않습니다.따라서 푸시스테이트를 사용해야 합니다.
이 기능은 모든 브라우저에서 작동합니다.
history.pushState({ page: 1 }, "title 1", "#nbb");
window.onhashchange = function (event) {
window.location.hash = "nbb";
};
반응
리액트 프로젝트의 모달 컴포넌트의 경우 모달의 열기 또는 닫기, 브라우저 백 제어는 필수 작업입니다.
stopBrowserBack: 브라우저의 뒤로 버튼 기능을 중지하고 콜백 기능도 가져옵니다.이 콜백 함수는 다음과 같습니다.const stopBrowserBack = callback => { window.history.pushState(null, "", window.location.href); window.onpopstate = () => { window.history.pushState(null, "", window.location.href); callback(); }; };startBrowserBack버튼 " " " " " " " " : "const startBrowserBack = () => { window.onpopstate = undefined; window.history.back(); };
프로젝트의 용도:
handleOpenModal = () =>
this.setState(
{ modalOpen: true },
() => stopBrowserBack(this.handleCloseModal)
);
handleCloseModal = () =>
this.setState(
{ modalOpen: false },
startBrowserBack
);
history.pushState(null, null, document.URL);
window.addEventListener('popstate', function () {
history.pushState(null, null, document.URL);
});
이 JavaScript 코드에서는 사용자가 돌아갈 수 없습니다(Chrome, Firefox, Internet Explorer 및 Edge에서 작동합니다).
jordanhollinger.com에 있는 이 기사는 제가 생각하는 최고의 옵션입니다.Razor의 답변과 비슷하지만 조금 더 명확합니다.아래 코드, 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'
}
}
}
<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>
이 코드는 최신 Chrome 및 Firefox 브라우저에서 테스트되었습니다.
<script type="text/javascript">
history.pushState(null, null, location.href);
history.back();
history.forward();
window.onpopstate = function () { history.go(1); };
</script>
간단하게 시험해 보세요.
history.pushState(null, null, document.title);
window.addEventListener('popstate', function () {
history.pushState(null, null, document.title);
});
작은 대본을 넣고 확인하시면 됩니다.이전 페이지를 볼 수 없습니다.
이것은 JavaScript로 이루어집니다.
<script type="text/javascript">
function preventbackbutton() { window.history.forward(); }
setTimeout("preventbackbutton()", 0);
window.onunload = function () { null };
</script>
window.onload 함수는 브라우저를 통해 이전 페이지 또는 이전 페이지를 방문하려고 할 때 실행됩니다.
매우 심플하고 깔끔한 기능으로 나중에 페이지에 간섭하지 않고 뒤로 화살표를 깰 수 있습니다.
이점:
- 즉시 로드하여 원래 해시를 복원하여 URL이 눈에 띄게 변경되어도 주의가 분산되지 않습니다.
- 사용자가 10회 눌러 종료할 수 있지만(그것은 좋은 일입니다), 실수로 종료할 수는 없습니다.
- 로 사용자
onbeforeunload - 한 번만 실행되며 상태를 추적하는 데 사용할 경우 추가 해시 조작을 방해하지 않습니다.
- 원래 해시를 복원하므로 거의 보이지 않습니다.
setInterval저속 브라우저가 고장나지 않고 항상 작동합니다.- HTML5 이력을 필요로 하지 않는 순수 JavaScript는 어디에서나 동작합니다.
- 눈에 띄지 않고 단순하며 다른 코드와 잘 어울립니다.
- 「」는 .
unbeforeunload모달 대화 상자에서 사용자를 중단시킵니다. - 그것은 문제없이 작동한다.
기타 중 는 " " " 를 사용합니다.onbeforeunload사용하지 마십시오.onbeforeunload사용자가 창을 닫으려면 사용자가 창을 닫으려면 대화 상자를 닫는 이 됩 시 니 고 , for 다 화 상 을 try whenever,, users the this다 up때마대표업델 모 이 modals like크라onbeforeunload보통 화면에 변화가 없을 때, 스크린에 변화가 없을 때, 이 목적을 위해, 이 목적을 위한 것은 아니다.는, 통상, 화면에서 실제로 변경을 실시해, 보존하지 않은 경우 등, 드문 상황에서만 유효합니다.이 목적을 위해서가 아닙니다.
구조
- 페이지 로드 시 실행
- 원래의 해시를 보존합니다(URL 에 있는 경우).
- #/noop/{1}을(를) 순차적으로 추가합니다.10}을(를) 철저히 하다
- 원래 해시를 복원합니다.
바로 그겁니다.더 이상 장난치지 말고, 백그라운드 이벤트 모니터링도 없고, 다른 것도 없어요.
1초만에 사용
배포하려면 페이지 또는 JavaScript 코드의 아무 곳에나 다음을 추가하십시오.
<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>
최신 브라우저에서는 다음과 같이 동작합니다.
// 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)
React(클래스 컴포넌트)에 문제가 있었습니다.
쉽게 풀 수 있었습니다.
componentDidMount() {
window.addEventListener("popstate", e => {
this.props.history.goForward();
}
}
I've used 사용한 적이 있다HashRouter부에서react-router-dom.
당신은 이것을 할 수 없고 해서는 안 된다.단, 이것은 도움이 될 수 있습니다.
<script type = "text/javascript" >
history.pushState(null, null, 'pagename');
window.addEventListener('popstate', function(event) {
history.pushState(null, null, 'pagename');
});
</script>
Google Chrome 및 Firefox에서 작동합니다.
이것은 브라우저의 뒤로 버튼과 뒤로 이동하기 위한 뒤로 버튼을 비활성화하는 데 도움이 된 것 같습니다.
history.pushState(null, null, $(location).attr('href'));
window.addEventListener('popstate', function () {
history.pushState(null, null, $(location).attr('href'));
});
코드 스니펫을 바로 실행한 후 다시 시도합니다.
history.pushState(null, null, window.location.href);
history.back();
window.onpopstate = () => history.forward();<script src="~/main.js" type="text/javascript"></script>
<script type="text/javascript">
window.history.forward();
function noBack() {
window.history.forward();
}
</script>
기본적으로 "뒤로"로 작동하는 Internet Explorer의 백스페이스 버튼을 방지하려면 다음과 같이 하십시오.
<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>
기본적으로 진행 중인 문서 '마우스엔터'/'마우스 탈퇴' 이벤트와 함께 창의 '언로드 전' 이벤트를 할당하여 클릭 수가 문서 범위를 벗어났을 때만 경고가 트리거되도록 합니다(이 경우 브라우저의 뒤로 또는 앞으로 단추가 될 수 있습니다).
$(document).on('mouseenter', function(e) {
window.onbeforeunload = null;
}
);
$(document).on('mouseleave', function(e) {
window.onbeforeunload = function() { return "You work will be lost."; };
}
);팅 료 완 just set셋 just?location.hash="Something"뒤로 버튼을 누르면 URL에서 해시가 삭제되지만 페이지가 돌아가지 않습니다.
이 방법은 실수로 되돌아가는 것을 방지하는 데 도움이 되지만 보안상 재응답 방지를 위해 백엔드를 설계해야 합니다.
여기의 솔루션 중 일부는 백이벤트 발생을 막을 수 없습니다.백이벤트 발생(브라우저 메모리 내의 페이지 관련 데이터 손실)을 허용한 후 백이벤트가 발생한 사실을 숨기기 위해 포워드이벤트를 재생합니다.페이지가 과도 상태를 유지하면 실패합니다.
이 솔루션은 리액트라우터를 사용하지 않을 때 vrfvr의 답변을 바탕으로 React용으로 작성되었습니다.
사용자가 팝업을 확인하지 않는 한 뒤로 버튼의 동작을 완전히 정지합니다.
const onHashChange = useCallback(() => {
const confirm = window.confirm(
'Warning - going back will cause you to loose unsaved data. Really go back?',
);
window.removeEventListener('hashchange', onHashChange);
if (confirm) {
setTimeout(() => {
window.history.go(-1);
}, 1);
} else {
window.location.hash = 'no-back';
setTimeout(() => {
window.addEventListener('hashchange', onHashChange);
}, 1);
}
}, []);
useEffect(() => {
window.location.hash = 'no-back';
setTimeout(() => {
window.addEventListener('hashchange', onHashChange);
}, 1);
return () => {
window.removeEventListener('hashchange', onHashChange);
};
}, []);
HTML 페이지(index.html)를 1개 만듭니다.스크립트 폴더/디렉토리 내에 mechanism.js도 만듭니다.그런 다음 필요에 따라 양식, 테이블, 스판 및 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>
</b>
</small>
[ <span id="inCountSPN">0</span> ]
</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() +
" - <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 및 스판 태그 ID 호출에 주목합니다.같은 페이지의 같은 스판 태그에 다른 HTML을 삽입할 수 있는 방법을 보여주기 위해서였습니다.Back/Forward는 이 설계에 어떤 영향을 미칩니까?개체를 숨기고 다른 개체를 모두 같은 페이지에서 바꾸기 때문에 이 기능은 사용할 수 없습니다.
어떻게 숨어서 표시할 수 있을까요?이하에, 이하를 참조해 주세요.
필요에 따라서, 「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>
내 경우엔 이건 쇼핑 주문이었어.그래서 버튼을 껐어요.사용자가 다시 클릭해도 버튼은 여전히 비활성화되어 있습니다.한 번 더 클릭한 후 페이지 버튼을 클릭하여 계속 진행합니다.나는 그들의 주문이 제출되었다는 것을 알고 다른 페이지로 건너뛴다.
실제로 페이지가 리프레쉬 되어 버튼이 되는 경우(이론적으로), 그 때 이미 주문이 송신되어 리다이렉트 된 페이지 로드로 대응할 수 있었습니다.
이 코드는 완전 자바스크립트입니다.홈 페이지 또는 필요한 모든 페이지에 올려놓으세요. 누군가 다시 돌아가면 이전에 접속했던 페이지로 이동하게 됩니다.
<script type="text/javascript">
function preventBack() {
window.history.forward();
}
setTimeout("preventBack()", 0);
window.onunload = function () { null };
</script>
언급URL : https://stackoverflow.com/questions/12381563/how-can-i-stop-the-browser-back-button-using-javascript
'programing' 카테고리의 다른 글
| MySQL - 삽입 오류 무시: 중복 항목 (0) | 2023.01.23 |
|---|---|
| jQuery 글로벌 키 누르기 이벤트 메서드 호출 vuejs 메서드가 예상대로 작동하지 않습니다.왜요? (0) | 2023.01.23 |
| Mysql: 테이블에서 다른 테이블에 없는 행을 선택합니다. (0) | 2023.01.23 |
| Jhipster에서 JDL을 사용할 때 오류 발생 (0) | 2023.01.23 |
| 최상위 레벨에서 비동기/대기 기능을 사용하려면 어떻게 해야 합니까? (0) | 2023.01.23 |