[Javascript] 웹 페이지 새로고침, 뒤로가기 및 더블 클릭 막기

회사 일로 간단한 웹 설문조사 폼을 개발한적 있다. 이 때 난감했던게 버튼을 연속클릭하거나 페이지를 뒤로 이동했을 시 기존 전송 데이터가 남아있어 DB에 중복으로 쌓였다. 이를 해결하기 위해 이전 페이지로 이동 및 버튼 더블 클릭을 막는 코드를 작성했다.

 

새로 고침 막기

// Ctrl + Key 형태의 조합키를 사용할 수 있는 코드
function doNotReload(){
	// keyCode = 78 : n, 82 : r, 116 : f5, 
	if( (event.ctrlKey == true && (event.keyCode == 78 || event.keyCode == 82)) || (event.keyCode == 116) )
	{
		event.keyCode = 0;
		event.cancelBubble = true;
		event.returnValue = false;
	}
};
	document.onkeydown = doNotReload;

 

뒤로 가기 막기

// 웹 페이지가 로딩 되자마자 실행되게끔
$(document).ready(function(){ 
	history.pushState(null, null, location.href);
	window.onpopstate = function () {
    	history.go(1);
	};
});

 

더블 클릭 막기

var doubleSubmitFlag = false;
function doubleSubmitCheck(){
    if(doubleSubmitFlag){
        return doubleSubmitFlag;	// 기본값 false
    }else{
        doubleSubmitFlag = true;	// 클릭시 doubleSubmitFlag는 true가 되고 false를 리턴한다.
        return false;
    }
}

function saveBtn() {
	// doublsSubmitCheck()가 true면 return한다.
	if(doubleSubmitCheck()) return;
	location.href="";	// 이동하고싶은 페이지
}