jQuery / Javascript를 사용하여 모든 형태의 페이지 새로 고침 방지
사용자가 내 페이지에 있으면 페이지를 새로 고치는 것을 원하지 않습니다.
언제든지 사용자 F5는 상단의 버튼을 누르거나 새로 고침합니다. 그는 경고를 받아야한다
페이지를 새로 고칠 수 없습니다.
또한 사용자가 새 탭을 열고 이전 탭에서 동일한 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 페이지에는 자바 스크립트 기록 파괴가 포함되어 있습니다. 따라서 그들은 원하는 모든 대기 페이지를 다시로드 할 수 있으며 WAIT 페이지에는 WAIT 자체에 필요한 양식 데이터 만 포함되어 있으므로 백그라운드에서 시작하도록 원래 작업을 트리거하지 않습니다.
이해가 되길 바랍니다.
히스토리 삭제 기능은 또한 BACK을 클릭 한 다음 새로 고치는 것을 방지했습니다.
비영리 단체가 해체 될 때까지 매우 매끄럽고 수년 동안 훌륭하게 작동했습니다.
예 : FORM ENTRY-모든 정보를 수집하고 제출되면 백엔드 작업을 트리거합니다.
양식 항목의 응답-정적 대기 페이지로의 리디렉션 및 / 또는 다른 양식 (대기 페이지)으로의 POST / GET을 수행하는 HTML을 반환합니다.
WAIT PAGE - Only contains FORM data related to wait page as well as javascript to destroy the most recent history. Like (-1 OR -2) to only destroy the most recent pages, but still allows them to go back to their original FORM entry page.
Once they are at your WAIT page, they can click REFRESH as much as they want and it will never spawn the original FORM job on the backend. Instead, your WAIT page should embrace a META timed refresh itself so it can always check on the status of their job. When their job is completed, they are redirected away from the wait page to whereever you wish.
If they do manually REFRESH... They are simply adding one more check of their job status in there.
Hope that helps. Good luck.
No, there isn't.
I'm pretty sure there is no way to intercept a click on the refresh button from JS, and even if there was, JS can be turned off.
You should probably step back from your X (preventing refreshing) and find a different solution to Y (whatever that might be).
Number (2) is possible by using a socket implementation (like websocket, socket.io, etc.) with a custom heartbeat for each session the user is engaged in. If a user attempts to open another window, you have a javascript handler check with the server if it's ok, and then respond with an error messages.
However, a better solution is to synchronize the two sessions if possible like in google docs.
Issue #2 now can be solved using BroadcastAPI.
At the moment it's only available in Chrome, Firefox, and 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);
참고URL : https://stackoverflow.com/questions/3527041/prevent-any-form-of-page-refresh-using-jquery-javascript
'IT TIP' 카테고리의 다른 글
개체 필드를 기반으로 ArrayList 정렬 (0) | 2020.10.17 |
---|---|
부트 스트랩 4 반응 형 유틸리티 표시 / 숨김 xs sm lg가 작동하지 않음 (0) | 2020.10.17 |
WebStorm 속도를 높이는 방법 (0) | 2020.10.17 |
조각의 Android SharedPreferences (0) | 2020.10.17 |
단일 레이블에 여러 글꼴 색상 사용 (0) | 2020.10.17 |