상자속으로

브라우저의 팝업차단 여부를 스크립트로 확인하고, 알림 메세지를 보여주고 싶다.

//팝업해제 안내팝업
function openPopup(){
    var win = window.open('', 'win', 'width=1, height=1, scrollbars=yes, resizable=yes');
    setTimeout(function(){
    	if (win == null || typeof(win) == "undefined" || (win == null && win.outerWidth == 0) || (win != null && win.outerHeight == 0)){
    		alert("팝업이 차단되었습니다.\n팝업차단 해제 후 결제를 진행하시기 바랍니다.");
    		if(win){
    		    win.close();
    		}
    		return;
    	}else if (win){
    	    if (win.innerWidth === 0)
    	    {
    	    	alert("팝업이 차단되었습니다.\n팝업차단 해제 후 결제를 진행하시기 바랍니다.");
    		}
    	}else{
    	    return;
    	}
    	if(win){    // 팝업창이 떠있다면 close();
    	    win.close();
    	}
	}, 500);
}    // openPopup

예제 소스는 h5bak.tistory.com/194 블로그를 참조하였습니다.

우선 위 예제는 13년도에 작성되어, 일부 설명을 덧붙이고자 합니다.

- 임의의팝업 생성하면서 변수에 초기화 하고, 해당 변수의 데이터 여부를 판단하여 alert을 한다.

- 21년 현시점 기준 chrome, firefox의 브라우저 정책으로, 팝업 차단 상태임에도 사용자가 의도한 팝업은 팝업한다.

하지만, callback에 의한 팝업은 차단된다.

- 팝업 차단 상태에서, 사용자가 의도한 팝업창 이후 또다른 팝업창을 생성하게 되면 브라우저에서 차단한다.

- 정상적으로 팝업 차단이 되었다면, 변수의 데이터 여부를 확인하기 이전에 브라우저(chrome, firefox)가 방해할것이다.

(브라우저 기본 팝업차단 메세지)

- 멀쩡한 소스에 setTimeout을 뿌린 이유는 팝업을 생성하고 alert이 발생해서 포커스를 가져가고 멈춰야 하는데,

alert되지 않아 디버깅을 위해 개발자도구를 열면 정상동작 한다......ㅎ

- 앞으로는 포기해야할 IE에서는 위 상황 모두 무시하고 동작을 잘한다.

저또한 예제소스를 참고했으나, 동작이 매끄럽지 않아 기록하고 공유하기위해 작성합니다.