jQuery / Javascript를 사용하여 모든 형태의 페이지 새로 고침 방지

93

사용자가 내 페이지에 있으면 페이지를 새로 고치는 것을 원하지 않습니다.

  1. 언제든지 사용자 F5는 상단의 버튼을 누르거나 새로 고침합니다. 그는 경고를 받아야한다

    페이지를 새로 고칠 수 없습니다.

  2. 또한 사용자가 새 탭을 열고 이전 탭에서 동일한 URL에 액세스하려고하면 경고가 표시됩니다.

    2 개의 탭에서 같은 페이지를 열 수 없습니다.

어쨌든 JavaScript 또는 jQuery를 사용하여이 작업을 수행 할 수 있습니까? 요점 1은 정말 중요합니다.

javascript  jquery  refresh 
— 판 카이
소스
Broadcast Channel API ( developer.mozilla.org/en-US/docs/Web/API/Broadcast_Channel_API )를 사용하여 감지하고 탭 간 통신을위한 메시지를 보낼 수 있습니다 . THUS, 이것을 사용하면 동일한 URL을 가진 여러 탭을 감지하고 다른 탭을 차단할 수 있습니다.
— aeXuser264

답변:

195

# 1은 window.onbeforeunload.

예를 들면 : 

<script type="text/javascript">
    window.onbeforeunload = function() {
        return "Dude, are you sure you want to leave? Think of the kittens!";
    }
</script>

사용자에게 메시지가 표시되고 페이지에 머 무르거나 계속 진행할 수있는 옵션이 제공됩니다. 이것은 점점 보편화되고 있습니다. Stack Overflow는 게시물을 입력하는 동안 페이지에서 벗어나려고하면이 작업을 수행합니다. 사용자가 새로 고침하는 것을 완전히 멈출 수는 없지만 그렇게한다면 정말 무섭게 들릴 수 있습니다.

# 2는 다소 불가능합니다. 세션과 사용자 로그인을 추적하더라도 두 번째 탭을 올바르게 감지했는지 보장 할 수는 없습니다. 예를 들어 창 하나를 연 다음 닫을 수 있습니다. 이제 새 창을 엽니 다. 이미 첫 번째 탭을 닫았음에도 불구하고 두 번째 탭으로 감지 할 수 있습니다. 이제 사용자가 첫 번째 창을 닫았 기 때문에 액세스 할 수없고 두 번째 창을 거부했기 때문에 액세스 할 수 없습니다.

사실 제 은행의 온라인 시스템은 # 2를하기 위해 정말 열심히 노력하고 있으며 위에서 설명한 상황은 항상 발생합니다. 은행 시스템을 다시 사용하려면 일반적으로 서버 측 세션이 만료 될 때까지 기다려야합니다.

— 세스
소스
1
onbeforeunload 이벤트는 Opera 브라우저 버전에서는 사용할 수 없습니다.
— WillyCornbread 2010 년
1
사용자가 페이지에 머물기로 선택하면 무언가를 할 수있는 방법이 있습니까?
— riship89
5
브라우저 간 호환성 및 라이브러리 문제 방지를 위해 대신 window.addEventListener ( developer.mozilla.org/en-US/docs/Web/Events/beforeunload 참조 ) 를 사용해야하지만 나를 위해 트릭을 수행 했습니다.
— Julien Bérubé 2014-06-25
이 질문이 오래되었다는 것을 알고 있지만 실제로 여러 세션을 방지하려는 경우 WebSocket을 사용할 수 있습니까?
— Meghan
1
@Sean-Yup ... 여러 세션 을 정말로 막고 싶다면. WebSocket은 상태 저장, 양방향 통신을 수행 할 수 있습니다. 클라이언트 (아마도)는 WebSocket이 연결되어있는 동안 갑자기 다른 사람이되지 않을 것이므로 해당 사용자에게 토큰을 할당하고 소켓이 닫히면이를 지울 수 있어야합니다. 그러나 사용자 에이전트의 예상되는 동작을 해킹하고 있으므로 아마도 나쁜 UX 일 것입니다. 나는 이와 같은 것이 적절할 수있는 극히 드문 경우를 생각할 수 있습니다 (온라인 게임 일 수 있습니다-누군가가 두 개의 레벨 37 죽음의 발톱 으로 로그인하는 것을 방지하기 위해 ...).
— Seth
34

사용자가 새로 고치는 것을 막을 수 없으며 실제로 시도해서는 안됩니다. 이 솔루션이 필요한 이유로 돌아 가야합니다. 여기서 근본적인 문제는 무엇입니까?. 거기에서 시작하여 문제를 해결하는 다른 방법을 찾으십시오. 아마도 당신이 그렇게해야한다고 생각하는 이유에 대해 설명했을 것입니다. 그것은 그러한 해결책을 찾는 데 도움이 될 것입니다.

기본적인 브라우저 기능을 깨는 것은 결코 좋은 생각이 아닙니다. 인터넷의 99.999999999 % 이상이 F5로 작동하고 새로 고침됩니다. 이것은 사용자 의 기대 이며 깨서는 안됩니다.

— 닉 크 레버
소스
문제는 페이지가 시벨 애플리케이션이라는 것입니다. 사용자가 세션에 있고 새로 고침을 누르면 새 세션이 생성되고 앱이 충돌합니다. 따라서 사용자가 새로 고칠 수 없도록해야합니다.
— pankaj
20
@pankaj-응용 프로그램 사이트 및 쿠키에서 수정해야합니다. 예를 들어 사용자가 여러 탭에서 세션을 공유하도록합니다.
— Nick Craver
9
여기서 어디로 오시는 지 잘 모르겠습니다. 인터넷의 수많은 사이트에서 양식이 더러운 경우 브라우저 새로 고침을 방지하여 변경 내용을 잃을 수 있다는 사실을 경고합니다. 이것이 왜 "기본 브라우저 기능을 깨뜨리고 있는지"확실하지 않습니다.
— Siraris
1
@Siraris : 맞습니다. 또한 사용자가 개인 네트워크에 있지 않아도 사용할 수있는 개인 응용 프로그램을 만들고 있습니다. 그래서 오프라인 사용을 위해 모든 것을 브라우저 저장소에 저장하지만 페이지를 다시로드하면 전체 애플리케이션이 사라집니다. 별로 "보통"이 아닐 수도 있지만,이 현대 IT 세계에서는 점점 더 그렇게 될 것입니다.
— cslotty
16

F5 키를 비활성화하는 것은 좋지 않지만 JQuery에서 아래와 같이 할 수 있습니다.

<script type="text/javascript">
function disableF5(e) { if ((e.which || e.keyCode) == 116 || (e.which || e.keyCode) == 82) e.preventDefault(); };

$(document).ready(function(){
     $(document).on("keydown", disableF5);
});
</script>

이것이 도움이되기를 바랍니다!

— Nilesh
소스
27
CMD + R이있는 OSX는 어떻습니까? 아니면 누를 버튼이있는 모바일? 나는 해결책으로이 표시되지 않습니다
— ItalyPaleAle
14

CGI의 예전에는 다양한 백엔드 작업을 트리거하는 많은 양식이있었습니다. 그룹에 대한 문자 알림, 인쇄 작업, 데이터 파밍 등

사용자가 "잠시만 기다려주십시오 ... 시간이 걸릴 수있는 거대한 작업을 수행 중입니다."라는 페이지에있는 경우. 그들은 REFRESH를 칠 가능성이 더 높았고 이것은 나쁠 것입니다!

왜? 그것은 더 느린 작업을 유발하고 결국 모든 것을 멈출 것이기 때문입니다.

해결책? 그들이 양식을 할 수 있도록 허용하십시오. 양식을 제출할 때 ... 작업을 시작하고 기다리라는 다른 페이지로 안내합니다.

중간의 페이지에 실제로 작업을 시작하는 데 필요한 양식 데이터가있는 위치입니다. 그러나 WAIT 페이지에는 javascript 히스토리 파괴가 포함되어 있습니다. 따라서 그들은 원하는 모든 대기 페이지를 다시로드 할 수 있으며 WAIT 페이지에는 WAIT 자체에 필요한 양식 데이터 만 포함되어 있으므로 백그라운드에서 시작하도록 원래 작업을 트리거하지 않습니다.

이해가 되길 바랍니다.

히스토리 삭제 기능은 또한 BACK을 클릭 한 다음 새로 고치는 것을 방지했습니다.

비영리 단체가 해체 될 때까지 매우 매끄럽고 수년 동안 훌륭하게 작동했습니다.

예 : FORM ENTRY-모든 정보를 수집하고 제출하면 백엔드 작업이 트리거됩니다.

양식 항목의 응답-정적 대기 페이지 및 / 또는 POST / GET을 다른 양식 (대기 페이지)으로 리디렉션하는 HTML을 반환합니다.

WAIT PAGE-대기 페이지와 관련된 FORM 데이터와 가장 최근 기록을 삭제하는 자바 스크립트 만 포함합니다. (-1 OR -2)와 같이 가장 최근 페이지 만 삭제하지만 원래 FORM 항목 페이지로 돌아갈 수 있습니다.

WAIT 페이지에 있으면 원하는만큼 REFRESH를 클릭 할 수 있으며 백엔드에서 원래 FORM 작업을 생성하지 않습니다. 대신 WAIT 페이지는 항상 작업 상태를 확인할 수 있도록 META 시간이 지정된 새로 고침 자체를 포함해야합니다. 작업이 완료되면 대기 페이지에서 원하는 위치로 리디렉션됩니다.

수동으로 REFRESH를 수행하는 경우 ... 그들은 단순히 작업 상태를 한 번 더 확인하는 것입니다.

도움이되기를 바랍니다. 행운을 빕니다.

— 토드
소스
2
이 놀랍고 유익한 답변에 대해 충분한 크레딧을 얻지 못했습니다. 감사합니다!!
— ShiningLight
2

Number (2)는 사용자가 참여하는 각 세션에 대한 사용자 정의 하트 비트가있는 소켓 구현 (예 : websocket, socket.io 등)을 사용하여 가능합니다. 사용자가 다른 창을 열려고하면 자바 스크립트 핸들러 검사가 있습니다. 정상이면 서버에 연결 한 다음 오류 메시지로 응답합니다.

그러나 더 나은 해결책은 Google 문서와 같이 가능하면 두 세션을 동기화하는 것입니다.

— 현서
소스
2

이제 2 번 문제는 BroadcastAPI를 사용하여 해결할 수 있습니다 .

현재로서는 Chrome, Firefox 및 Opera에서만 사용할 수 있습니다.

var bc = new BroadcastChannel('test_channel');

bc.onmessage = function (ev) { 
    if(ev.data && ev.data.url===window.location.href){
       alert('You cannot open the same page in 2 tabs');
    }
}

bc.postMessage(window.location.href);
— RockLegend
소스
당사 사이트를 사용함과 동시에 당사의 쿠키 정책과 개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.