카카오톡 간편 로그인 2.0 팝업창 띄웠을 때 부모창 overflow hidden 이슈

카카오톡 간편 로그인 2.0의 경우 팝업창으로 로그인을 띄우면 window.open 으로 로그인 창이 뜬다.

이 때 로그인 진행을 하지 않고 그대로 팝업창을 닫으면 본창이 스크롤이 사라져 있음을 발견할 수 있다.
이 것은 팝업창으로 로그인 폼 띄울 때 카카오톡 간편 로그인 자바스크립트에서 html과 body에 overflow : hidden 스타일을 강제로 넣기 때문이다.

그래서 로그인이 성공하여 팝업창이 닫히면서 본창에 이벤트를 발생시켜 진행되지 않는 이상은 팝업창을 닫았다는 이벤트를 본창에 전달하지 않기에 팝업창을 닫으면 본창이 스크롤이 안되는 상태로 남겨진다.

카카오톡 개발자 고객센터로 문의한 결과도 이 이벤트는 전달하지 않기에 강제로 window.open 이벤트를 변조할 수 밖에 없다.

var orgOpen = window.open;
var openkakao;

window.open = function (...args) {
 var getArgs = args;
 if(getArgs[0].indexOf('kakao.com') >= 0){
    openkakao = orgOpen(...args);
    var timer = setInterval(function() {
      if(openkakao.closed) {
        if(document.querySelector("html").style.overflow == "hidden" || document.querySelector("body").style.overflow == "hidden"){
          document.querySelector("html").removeAttribute("style");
          document.querySelector("body").removeAttribute("style");
        }else{
          clearInterval(timer);
        }
      }
    }, 1000);
 }else{
    return orgOpen(...args);
 }
}

이렇게 페이지 로딩될 때 선언해주면 window.open 팝업창으로 띄우는 url에 kakao.com 을 포함되어 있는 경우 팝업창이 닫히면 본창에 html 또는 body 스타일 속성에 overflow: hidden 이 있는 조건을 체크한 뒤 html과 body의 스타일을 삭제하도록 했다.

TOP