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

Program / 글쓴이

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

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

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

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

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

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

답변

# 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를하기 위해 정말 열심히 노력하고 있으며 위에서 설명한 상황은 항상 발생합니다. 은행 시스템을 다시 사용하려면 일반적으로 서버 측 세션이 만료 될 때까지 기다려야합니다.

답변

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

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

답변

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>

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

답변

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를 수행하는 경우 … 그들은 단순히 작업 상태를 한 번 더 확인하는 것입니다.

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

답변

아니, 없습니다.

JS에서 새로 고침 버튼을 클릭하는 것을 가로 챌 수있는 방법이 없다고 확신하며,있는 경우에도 JS를 끌 수 있습니다.

아마도 X에서 뒤로 물러나 (새로 고침 방지) Y에 대한 다른 솔루션을 찾아야합니다 (그게 뭐든간에).

답변

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

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

답변

이제 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);