자바스크립트 팝업 차단 감지(Javascript popup blocker detection)

자바스크립트로 브라우저의 팝업 차단 기능을 감지하여 

판별 후 알림 메세지를 출력하는 함수입니다.

인터넷 익스플로러(Internet Explorer)와 크롬(chrome)에서 테스트했습니다.

(Javascript function for popup blocker detection in IE, Chrome)

 

 

원리는 먼저 팝업을 띄우는 window.open() 함수를 변수에 담아

변수의 값이 null일 경우 팝업차단 기능이 설정되어 있다고 판별하는 원리입니다.

 

판별은 가능하지만 단점은..

페이지 로딩과 동시에 팝업 차단 기능을 판별하게 된다면

팝업 차단 기능이 설정되어 있지 않았을 경우 무조건 팝업창이 window.open에 의해 출력됩니다.

그래서 소스 마지막 부분에 팝업창이 떠있으면

window.close();로 창을 닫았습니다.

결론은 팝업창이 잠깐 떴다 사라지는게 눈에 보인다는 점..

 

페이지 로딩 후 바로 판별하는 구조(window.onload)가 아니고

버튼 클릭 시 팝업창이 출력되는 경우라면 위의 문제는 해결할 수 있습니다.

 

 

예제소스

 

function openPopup(){
    var win = window.open('', 'win', 'width=1, height=1, scrollbars=yes, resizable=yes');
   
if (win == null || typeof(win) == "undefined" || (win == null && win.outerWidth == 0) || (win != null && win.outerHeight == 0) || win.test == "undefined") 
{
alert("팝업 차단 기능이 설정되어있습니다\n\n차단 기능을 해제(팝업허용) 한 후 다시 이용해 주십시오.\n\n만약 팝업 차단 기능을 해제하지 않으면\n정상적인 주문이 이루어지지 않습니다."); 
 
if(win){
    win.close();
}
return;
}
else if (win)
{
    if (win.innerWidth === 0)
    {
        alert("팝업 차단 기능이 설정되어있습니다\n\n차단 기능을 해제(팝업허용) 한 후 다
시 이용해 주십시오.\n\n만약 팝업 차단 기능을 해제하지 않으면\n정상적인 주문이 이루어지지 않습니다.");
}
}
else
{
    return;
}
if(win){    // 팝업창이 떠있다면 close();
    win.close();
}
}    // 함수 끝
 
window.onload = function(){      // 페이지 로딩 후 즉시 함수 실행(window.onload)
    openPopup()
}

 

크롬에서 실행결과

 

 

인터넷 익스플로러(IE) 실행결과

 

 

 

위의 소스는 큰 기능만 구현해 놓은 함수이므로 예외처리 해야할 부분이 많습니다.

전반적인 기능만 돌아가도록 구현한 함수입니다.

위의 예제에는 브라우저 별 예외처리가 없지만

일단적으로 크롬과 인터넷 익스플로러에서 작동이 됩니다.

 

외국 사이트를 검색하다가 알게된 부분이 한가지 있습니다.

크롬의 경우 팝업이 한번 뜨게되면 새로고침을 아무리 해도 팝업이 계속 떠있는 상태로 인식을하여 최초 한번만 판별하여 사용해야한다는 팁이 있습니다.