브라우저의 뒤로 버튼 비활성화


98

브라우저의 뒤로 버튼을 비활성화하는 방법 (브라우저 간)?


92
사용자의 컴퓨터 나 브라우저를 소유하지 않습니다.
Instance Hunter

47
+1 브라우저 뒤로 버튼을 비활성화하는 것이 '나쁜 관행'이라는 데 동의하지만 질문 자체에 반대 투표를 할 이유가 없으며 왜 imo로 이동하는 방법이 있는지 설명하고 설명 할 이유가 없습니다.
ChristopheD

45
우리는 왜이 질문에 적대적입니까? 우리가 아는 한,이 질문을하는 사람은 이것이 좋지 않은 사용성 관행이라는 것을 이미 알고 있지만 요구 사항을 따르고 있거나 무언가를 배우고 싶을 수도 있습니다. 이 질문이 가상의 질문 인 것처럼 가장하고 그런 일을한다면 어떻게 할 수 있을지 대답하지 않겠습니까?
thomasrutter

5
어떤 일을하고 싶은 욕구와 상관없이 절대로하지 말아야 할 일이 있습니다. 이에 대해 협상 할 수없는 요구 사항이 있다는 것은 비즈니스를 설정하지 않은 사람들이 요구 사항을 설정했다는 것을 의미하며 이는 훨씬 더 큰 문제입니다.
annakata

37
으, 나는 지금까지 가장 멋진 댓글을 작성했지만 실수로 뒤로 버튼을 눌렀을 때 잃어 버렸다.
Dan Williams

답변:


26

이 질문은 이것과 매우 유사 하나 ...

이 작업을 수행하려면 캐시를 강제로 만료시켜야합니다. 페이지 코드 뒤에 다음 코드를 배치하십시오.

Page.Response.Cache.SetCacheability(HttpCacheability.NoCache)

14
페이지를 캐시 할 수 없게 만드는 것은 OP가 원하는 것을 얻지 못합니다 : 뒤로 버튼을 사용하여 방문 페이지를 비활성화하는 것입니다. 브라우저가 뒤로 버튼 (AFAIK를 수행 할 의무가없는 브라우저)을 사용할 때 캐시가없는 경우에도 해당 페이지를 다시로드하는 방법을 제공합니다 (일반적으로 경고 대화 상자를 표시 한 후). 따라서 사용자가 해당 페이지로 돌아가는 것을 정말로 원하지 않는 경우 해당 페이지에 대한 요청이 원본 서버까지 계속되어야하므로 더 나쁠 수 있습니다. 페이지가 재 방문되었음을 감지하려면 서버 측이 필요합니다. 헤더는 무시할 수 있습니다.
thomasrutter

60

예상되는 브라우저 동작을 비활성화하지 마십시오.

페이지가 사용자가 한두 페이지 뒤로 이동할 가능성을 처리하도록합니다. 그들의 소프트웨어를 불구로 만들려고하지 마십시오.


6
고마워요 친구, 문제는 AJAX 앱을 빌드하는 경우 뒤로 버튼을 비활성화하거나 앱을 살펴보고 가능한 모든 시나리오에 대해 적절한 백 액션을 수행하는 것 사이의 비용-편익 절충이 비활성화되는 경향이 있다는 것입니다. 뒤로 버튼은 둘 중 더 매력적인 옵션입니다.
david.barkhuizen 2012

특히 현재 인터넷에 넘쳐나는 리디렉션 악성 코드 광고의 홍수에 대해 Jonathan의 의견에 동의합니다. 그들은 이미 경고 시스템을 악용하여 페이지를 실제로 잠그는 기능을 제공하지 않고 페이지를 떠나는 것을 어렵게 만듭니다
MikeT

46

JavaScript를 사용하여 뒤로 버튼을 비활성화하는 약간의 해킹을 생각해 냈습니다. Chrome 10, firefox 3.6 및 IE9에서 확인했습니다.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<title>Untitled Page</title>
<script type = "text/javascript" >
function changeHashOnLoad() {
     window.location.href += "#";
     setTimeout("changeHashAgain()", "50"); 
}

function changeHashAgain() {
  window.location.href += "1";
}

var storedHash = window.location.hash;
window.setInterval(function () {
    if (window.location.hash != storedHash) {
         window.location.hash = storedHash;
    }
}, 50);


</script>
</head>
<body onload="changeHashOnLoad(); ">
Try to hit the back button!
</body>
</html>

무엇을하고 있습니까?

댓글에서 :

이 스크립트는 브라우저가 검색 기록의 일부로 URL의 "#"기호 뒤에 오는 모든 것을 고려한다는 사실을 활용합니다. 이것이하는 일은 페이지가로드 될 때 "# 1"이 URL에 추가됩니다. 50ms 후에 "1"이 제거됩니다. 사용자가 "뒤로"를 클릭하면 브라우저는 URL을 "1"이 제거되기 전의 URL로 변경하지만 동일한 웹 페이지이므로 브라우저가 페이지를 다시로드 할 필요가 없습니다. – 요시 샤쇼


1
이 스크립트는 페이지가로드 될 때 URL에 "#"을 추가하고 50ms마다 URL에 1을 추가하는 것처럼 보입니다.
ashes999 2011 년

6
이 스크립트는 브라우저가 검색 기록의 일부로 URL의 "#"기호 뒤에 오는 모든 것을 고려한다는 사실을 활용합니다. 이것이하는 일은 페이지가로드 될 때 "# 1"이 URL에 추가됩니다. 50ms 후에 "1"이 제거됩니다. 사용자가 "뒤로"를 클릭하면 브라우저는 URL을 "1"이 제거되기 전의 URL로 변경하지만 동일한 웹 페이지이므로 브라우저가 페이지를 다시로드 할 필요가 없습니다.
Yossi Shasho 2011

1
URL은 두 번 변경됩니다. 구현을 위장하기 위해서만이 작업을 수행하므로 아무도 "1"이 추가 된 것을 볼 수 없습니다. 따라서 실제로 사용자가 다시 클릭하면 페이지에서 잠시 "# 1"을 다시 추가하고 다시 제거합니다. BTW- "1"일 필요는 없으며 모든 문자열이 될 수 있습니다.
Yossi Shasho 2011

2
이 문제는 페이지가 50ms마다 맨 위로 스크롤된다는 것입니다. 창 높이보다 큰 양식이 있으면 양식 값을 채울 수 없습니다.
3komma14

매우 감사합니다. 이것은 내가 가지고있는 JavaScript 기반의 특히 대화 형 페이지에 매우 유용합니다. 여기에서 좌우 스크롤은 메커니즘의 일부입니다. 이렇게하면 사용자가 실수로 페이지를 "뒤로"이동하는 Mac OS X의 스크롤 제스처 문제를 제거하는 데 도움이됩니다 (이미 끝까지 스크롤 된 경우 쉽게 수행 할 수 있음).
Iain Collins

34

다른 사람들은 "이렇게하지 마십시오"라고 말하는 접근 방식을 취했지만 실제로 포스터의 질문에 답하지 않습니다. 모두가 이것이 나쁜 생각이라는 것을 알고 있다고 가정 해 봅시다. 그러나 어쨌든 그것이 어떻게 이루어 졌는지 궁금합니다 ...

사용자 브라우저에서 뒤로 버튼을 비활성화 할 수는 없지만 사용자가 돌아갈 경우 응용 프로그램이 중단되도록 (오류 메시지를 표시하고 사용자가 다시 시작해야 함) 만들 수 있습니다.

이를 위해 내가 본 한 가지 접근 방식은 애플리케이션 내의 모든 URL과 모든 양식에 토큰을 전달하는 것입니다. 토큰은 모든 페이지에서 다시 생성되며 사용자가 새 페이지를로드하면 이전 페이지의 모든 토큰이 무효화됩니다.

사용자가 페이지를로드 할 때 페이지는 올바른 토큰 (이전 페이지의 모든 링크 / 양식에 제공된)이 전달 된 경우에만 표시됩니다.

제 은행에서 제공하는 온라인 뱅킹 애플리케이션은 다음과 같습니다. 뒤로 버튼을 전혀 사용하면 더 이상 링크가 작동하지 않고 더 이상 페이지를 다시로드 할 수 없습니다. 대신 뒤로 갈 수 없으며 다시 시작해야한다는 알림이 표시됩니다.


1
내 은행은 다른 접근 방식을 취합니다. 세션을 완전히 종료합니다. 뒤로 버튼을 사용하는 것은 로그 아웃하는 것과 같습니다.
RobG

동일한 접근 방식처럼 들립니다. 그들은 당신이 돌아가서 오류 조건을 던졌다는 것을 감지하고 있습니다.
thomasrutter 2012

또한 Joomla는 토큰 솔루션을 중심으로 작업합니다. 모든 페이지와 모든 양식에서 토큰이 생성됩니다. 실제로 "사용자가 페이지에 너무 많이 머무르고 토큰이 만료되는 경우"와
같이이

1
오해하지 마십시오.이 관행에는 많은 문제가 있습니다. 나는 그것을 추천하는 것이 아니라 그것이 정상적으로 달성되는 방법을 말하는 것입니다. 이전 페이지에서 예상되는 링크 중 하나를 따르지 않았 음을 감지하기 위해 페이지간에 고유 한 토큰을 전달한 다음 세션을 종료하거나 오류를 표시합니다. 뒤로 버튼이 깨지고, 탭 브라우징이 깨지고, 북마크 및 / 또는 링크 공유 등이 깨집니다. 게다가 문제가 실제로 해결되지는 않습니다.
thomasrutter

문제가 사용자가 뒤로 버튼을 사용하려고하면 정보가 손실되거나 이미 중단되는 것이라면 뒤로 버튼을 비활성화하는 것이 더 바람직한 접근 방식입니다.
PoloHoleSet

10

내가 직접 답을 찾고있는 동안 "Best Practice"는 .... 구식입니다 ... 브라우저처럼. (정말 브라우저는 추악한 화석입니다)

가장 안전한 방법은 브라우저가 사용자가 페이지에 인터페이스를 제어 할 수있는 기능을 부여 할 수있는 메서드 / 요청을 구현하는 것입니다.

왜? 내 현재 프로젝트의 경우 100 % JavaScript로 구축되고 제어되는 인터페이스를 구축하고 있기 때문입니다. 페이지 변경이 없기 때문에 뒤로 버튼은 내 프로젝트에 없습니다. (즉, 새로 고침 때문에 피투성이 빠르고 페이지 깜박임이 없습니다. 실제 응용 프로그램과 같습니다!)

인터페이스를 "하이 잭"하는 기능이없는 이유를 알고 있으며 이해합니다. 하지만 최소한 브라우저에서 요청할 수 있어야합니다! 이제 그것은 하이 잭 위험이없는 진정한 "모범 사례"가 될 것입니다.

그러나 브라우저는 브라우저입니다. 나는 이와 관련하여 어떤 일이 일어날 것이라고 기대하지 않습니다.


1
100 % 동의하지 않습니다.이 기능은 웹 개발자의 99 %에게는 훌륭 할 것이지만 나머지 1 %는이 기능을 남용 할 수 있지만 웹 사이트가 인터넷 사용 능력을 제어하도록 허용하는 것은 너무 위험합니다. 교차 도메인 리디렉션 스크립트는 금지 또는 이러한 종류의 남용으로 인해 스크립트 실행이 허용되는지 확인하도록 허용해야합니다
MikeT

@MikeT-내 특정 응용 프로그램 페이지를 탐색하는 동안 "뒤로"버튼을 비활성화하면 다른 사람이 인터넷을 사용할 수 없게되는 방법은 무엇입니까?
PoloHoleSet

@PoloHoleSet 브라우저의 뒤로 버튼을 비활성화 할 수있는 기능이 있으면 모든 사람도 마찬가지입니다. 원하는 페이지로 이동하고 브라우저에서 탐색 컨트롤을 비활성화 할 수있는 경우 하나의 리디렉션 만 있으면됩니다. 탈출합니까? 존재하지 않는 바이러스를 제거하기 위해 바이러스를 설치하라는 메시지가 표시되는 "바이러스가 있습니다"페이지를 보셨을 것입니다. 이제 그들이 실제로 당신을 떠나는 것을 막을 수있는 사이트를 상상해보십시오
MikeT

@MikeT-탐색 창에 다른 URL을 입력하고 탭을 닫을 수 있으며 자바 스크립트를 비활성화 할 수 있습니다. 요점은 누군가가 할 수 있는지 여부가 아닙니다. 왜냐하면 당신은 할 수 있기 때문입니다. 정책 상 사람들은 할 수 있다면해서는 안된다고 말합니다. 우리는 브라우저를 디자인하는 방법에 대해 말하는 것이 아니라 응용 프로그램을 프로그래밍하는 방법에 대해 말하는 것입니다.
PoloHoleSet

@PoloHoleSet 탐색을 잠 그려면 브라우저 기록과 입력 한 URL도 사용자에게 워크 플로를 우회 할 수있는 방법을 제공하므로 뒤로 버튼 이상을 잠 가야합니다. 그리고 내가 말했듯이 우리가 당신이나 내가 할 일에 대해 말하는 것이 아니라 악성 요소입니다. 악의적 인 웹 사이트가 브라우저를 제어하는 ​​것을 막는 유일한 방법이 브라우저의 모든 js를 비활성화하는 것이라면 인터넷을 현대 웹은 스크립트를 사용하여 콘텐츠를 제공합니다. 사용자를 제어 할 수있는 수준의 제어를 원하는 경우 워크 플로를 제공 할 앱을 만듭니다
MikeT

4

나는 같은 질문을 찾고 있었고 사이트에서 다음 코드를 발견했습니다. 여기에서 공유 할 생각 :

function noBack()
{
   window.history.forward()
}
noBack();
window.onload = noBack;
window.onpageshow = function(evt){ if(evt.persisted) noBack(); }
window.onunload = function(){ void(0); }

그러나 위의 사용자들이 언급했듯이 이것은 결코 좋은 습관이 아니며 모든 이유로 피해야합니다.


2
피해야하는 이유를 설명 할 수 있다면 좋을 것입니다.
크리스 스노우

내 이해에 따르면 기술적으로 다른 사람의 브라우저에서 뒤로 버튼을 비활성화 할 수 없으며 버튼을 사용할 수 없거나 동일한 페이지를 계속로드하도록 만들 수 있습니다. JS를 통해 수행하는 것보다 서버 측 코드를 사용하고 뒤로 버튼을 사용할 필요가없는 적절한 논리를 사용하십시오. 동일한 페이지를 다시로드하거나 사용자 지정 메시지를 표시하는 것과 같은 대체 작업을 사용해야합니다.
user704988

2

클라이언트 측 기술에 의존하면 우회 할 수 있습니다. 예를 들어 자바 스크립트가 비활성화 될 수 있습니다. 또는 사용자가 JS 스크립트를 실행하여 제한 사항을 해결할 수 있습니다.

내 생각 엔 사용자 세션을 서버 측에서 추적하고 사용자 / 브라우저를 필요한 페이지로 리디렉션 (Response.Redirect가 아닌 Server.Transfer에서와 같이) 하여이 작업을 수행 할 수 있습니다.


2
<body onLoad="if(history.length>0)history.go(+1)">

2

몇 가지 다른 구현이 있습니다. IE 용 플래시 솔루션과 일부 iframe / 프레임 솔루션이 있습니다. 이것을 확인하십시오

http://www.contentwithstyle.co.uk/content/fixing-the-back-button-and-enabling-bookmarking-for-ajax-apps

BTW : 뒤로 버튼을 비활성화 (또는 적어도 1 단계 방지)해야하는 타당한 이유가 많이 있습니다. 위 기사에서 설명한 해시 솔루션을 구현하는 예로 Gmail을 살펴보세요.

구글 "어떻게 ajax가 뒤로 버튼을 깨뜨 렸는지"그리고 사용자 테스트와 뒤로 버튼 비활성화의 유효성에 대한 많은 기사를 찾을 수 있습니다.


Facebook의 새로운 사진 뷰어도 확인하십시오. 뒷면 버튼 대신 브라우저 기본 일을 (당신이 원하는되는) 사진을 백업 소요 공지 것을
DallinDyer

2

나는 또한 같은 문제가 있었다. head 태그 또는 에서이 자바 스크립트 기능을 사용하면 100 % 잘 작동하여 돌아갈 수 없습니다.

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

1

이 코드를 사용해보십시오. 나를 위해 일했습니다. 기본적으로 URL에 "1"을 추가하여 최근 기록 페이지를 변경하는 페이지가로드되는 즉시 해시를 변경합니다. 따라서 뒤로 버튼을 누르면 매번 같은 페이지로 리디렉션됩니다.

 <script type="text/javascript">
    var storedHash = window.location.hash;
    function changeHashOnLoad() { window.location.hash = "1";}
    window.onhashchange = function () {
        window.location.hash = storedHash;
    }
</script>

<body onload="changeHashOnLoad(); ">

</bod>


0

브라우저 뒤로 버튼을 비활성화하는 대신 지원하는 것이 좋습니다. .NET 3.5는 브라우저 뒤로 (및 앞으로) 버튼을 매우 잘 처리 할 수 ​​있습니다. Google로 검색 : "Scriptmanager EnableHistory". 브라우저 기록 (ScriptManager-> AddHistoryPoint)에 항목을 추가 할 사용자 작업을 제어 할 수 있으며 사용자가 브라우저 뒤로 / 앞으로 단추를 클릭 할 때마다 ASP.NET 응용 프로그램에서 이벤트를 수신합니다. 이것은 알려진 모든 브라우저에서 작동합니다.


0

전체적으로 뒤로 버튼을 비활성화하는 것은 실제로 나쁜 습관입니다. 그러나 특정 상황에서는 뒤로 버튼 기능이 의미가 없습니다.

페이지 간 원치 않는 탐색을 방지하는 한 가지 방법은 다음과 같습니다.

톱 페이지 (파일 top.php) :

<?php
    session_start();
    $_SESSION[pid]++;
    echo "top page $_SESSION[pid]";
    echo "<BR><a href='secondary.php?pid=$_SESSION[pid]'>secondary page</a>";
?>

보조 페이지 (파일 secondary.php) :

<?php
    session_start();
    if ($_SESSION[pid] != $_GET[pid]) 
        header("location: top.php");
    else {
        echo "secondary page $_SESSION[pid]";
        echo "<BR><a href='top.php'>top</a>";
    }
?>

그 효과는 자신의 링크를 사용하여 맨 위 페이지에서 2 차 페이지로 그리고 뒤로 (예 : 취소) 탐색을 허용하는 것입니다. 단, 최상위 페이지로 돌아 가면 브라우저 뒤로 버튼이 보조 페이지로 이동할 수 없습니다.


0

나도 전에 같은 상황에 직면했고 ... 어떤 도움도 없었습니다. 이것들을 시도해보십시오 아마도 이것들이 당신을 위해 일할 것입니다.

로그인 페이지 <head>태그 :

<script type="text/javascript">
    window.history.forward();
</script>

로그 아웃 버튼에서 나는 이것을했다 :

protected void Btn_Logout_Click(object sender, EventArgs e)      
{
    connObj.Close();
    Session.Abandon();
    Session.RemoveAll();
    Session.Clear();
    HttpContext.Current.Session.Abandon();
}

로그인 페이지에서 다음과 같이 사용자 이름 텍스트 상자에 초점을 두었습니다.

protected void Page_Load(object sender, EventArgs e)
{
    _txtUsername.Focus();
}

이것이 도움이되기를 바랍니다 ... :) 누군가 plz이 페이지를 편집하는 방법을 가르쳐줍니다 ...


a) 답변 수정 b) 물음표 클릭 c) 고급 도움말 클릭 d) 읽고 적용 :-) 또한 ctrl-k는 선택한 블록을 un / indents하여 un / indents to un / format as code. 게다가 포맷터는 탭을 잘 처리 할 수 ​​없습니다 (하지만 여기서는 문제가되지 않을 것입니다)
kleopatra

0

항목을 편집 / 삭제할 때 페이지가 예기치 않게 리디렉션되지 않도록 웹 앱에서 삭제 및 백 스페이스 키를 부드럽게 억제해야하는 경우 다음 코드를 사용할 수 있습니다.

window.addEventListener('keydown', function(e) {
  var key = e.keyCode || e.which;
  if (key == 8 /*BACKSPACE*/ || key == 46/*DELETE*/) {
    var len=window.location.href.length;
    if(window.location.href[len-1]!='#') window.location.href += "#";
  }
},false);

0

이 코드를 사용해보십시오. 이 코드를 마스터 페이지에 구현하기 만하면 모든 페이지에서 작동합니다.

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

0

Yossi Shasho 의 코드 의 문제점 은 페이지가 50ms마다 맨 위로 스크롤된다는 것입니다. 그래서 그 코드를 수정했습니다. 이제 모든 최신 브라우저, IE8 이상에서 잘 작동합니다.

var storedHash = window.location.hash;
function changeHashOnLoad() {
    window.location.href += "#";
    setTimeout("changeHashAgain()", "50");
}

function changeHashAgain() {
    window.location.href += "1";
}

function restoreHash() {
    if (window.location.hash != storedHash) {
        window.location.hash = storedHash;
    }
}

if (window.addEventListener) {
    window.addEventListener("hashchange", function () {
        restoreHash();
    }, false);
}
else if (window.attachEvent) {
    window.attachEvent("onhashchange", function () {
        restoreHash();
    });
}
$(window).load(function () { changeHashOnLoad(); });

0

이것은 우리에게 도움이 된 것 같습니다.

history.pushState(null, null, $(location).attr('href'));
window.addEventListener('popstate', function () {
    history.pushState(null, null, $(location).attr('href'));
});

0
<script>
    $(document).ready(function() {
        function disableBack() { window.history.forward() }

        window.onload = disableBack();
        window.onpageshow = function(evt) { if (evt.persisted) disableBack() }
    });
</script>
당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.