팝업이 차단 되었습니다. (회피하기)

우리는 인터넷을 하다보면, 아래의 그림처럼 팝업이 차단되는 경우가 많이 있다.

브라우저가 팝업을 여는 동안 해당 페이지가 사용자를 괴롭히고 있다고 판단 하는 경우에 노출이 된다. ~~몇몇 분들은 어렸을 적 친구의 피씨에 설치하였던 무한 팝업을 해본 기억이 있을 것이다.~~ 바로 그것을 막는 것이라 보면 된다.

자 그러면 괴롭히고 있다고 판단한 경우라고 하였는데, 그러면 그것이 무엇일까?

사용자 몰래 띄운 팝업

사용자 몰래 팝업을 띄우는 거는 꽤나 많이 볼 수 있다.


<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <script>
        window.open('https://www.google.com', '_blank')
    </script>
</head>
<body></body>
</html>

위의 코드는 아무런 맥락 없이 해당 페이지에 들어가자 팝업을 열게 하는 코드이다. 저런 상황을 팝업을 차단 하지 않게 된다면, 해당 페이지가 새로운 팝업을 여는 페이지를 열고 또 그페이지는 또 새로운 페이지를 여는 페이지를 열고 계속 반복하게 된다면 사용자를 괴롭히는 것이 될 수 있을 것이다.

공공 사이트에서 예전에 공지사항을 노출시키기 위하여 이러한 행위를 많이 했었고 해당 팝업들은 열심히 차단당했다.

즉 우리는 해당 페이지를 열기 위해서 유저의 행위를 받아야 한다.


<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <script>
        function openNewPage() {
            window.open('https://www.google.com', '_blank')
        }
    </script>
</head>
<body>
<button onclick="openNewPage()">새 창 열기</button>
</body>
</html>

한번에 많은 팝업 열기


<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <script>
        function openNewPage() {
            window.open('https://www.google.com', '_blank')
            window.open('https://www.google.com', '_blank')
            window.open('https://www.google.com', '_blank')
            window.open('https://www.google.com', '_blank')
            window.open('https://www.google.com', '_blank')
            window.open('https://www.google.com', '_blank')
            window.open('https://www.google.com', '_blank')
            window.open('https://www.google.com', '_blank')
        }
    </script>
</head>
<body>
<button onclick="openNewPage()">새 창 열기</button>
</body>
</html>

한 번에 여러 페이지를 여는 것 또한 사용자를 괴롭히는 행위일 것이다. 따라서 처음 하나의 window.open 만 실행 후 나머지는 차단을 당하게 된다.

데이터를 외부에서 가져오는 경우

해당 내용은 브라우저 별로 사용하는 라이브러리 별로 다른 상황이라서 주의 깊게 확인하길 바란다.


<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script>
        function xhttpOpenNewPage() {
            const xhttp = new XMLHttpRequest()
            xhttp.onload = function () {
                window.open('https://www.google.com?XMLHttpRequest', '_blank')
                console.trace("xhttpOpenNewPagee")
            }
            xhttp.open('GET', '.')
            xhttp.send()
        }
        function fetchOpenNewPage() {
            fetch('.').then((x) => {
                window.open('https://www.google.com?fetch', '_blank')
                console.trace("fetchOpenNewPage")
            })
        }
        function axiosOpenNewPage() {
            axios.get('.').then((x) => {
                window.open('https://www.google.com?axios', '_blank')
                console.trace("fetchOpenNewPage")
            })
        }
        function jqueryOpenNewPage() {
            $.get('.', function (data, status) {
                window.open('https://www.google.com?$', '_blank')
                console.trace("jqueryOpenNewPage")
            })
        }
    </script>
</head>
<body>
<button onclick="xhttpOpenNewPage()">XMLHttpRequest 새 창 열기</button>
<button onclick="fetchOpenNewPage()">fetch 새 창 열기</button>
<button onclick="axiosOpenNewPage()">axios 새 창 열기</button>
<button onclick="jqueryOpenNewPage()">jquery 새 창 열기</button>
</body>
</html>

모든 라이브러리에 대해서 확인이 된 것도 아니고, 모든 상황에서 이 API만 사용하면 해결 할 수 있어! 이러한 것은 없다. 위의 상황에서 firefox를 사용하였을때에는 fetch의 경우에만 데이터를 가져온 후 window.open을 팝업 차단 없이 사용 할 수 있었다. 이것은 브라우저 버전이 올라가 수정이 될 수도 있기 때문에 믿어서는 안된다.

또한 특정 브라우저에서는 fetch를 막을 수도 있고, 당신이 개발하는 환경에서 폴리필이 fetch를 XMLHttpRequest로 바꿀수도 있지 않은가? 또한 axios, $.ajax의 경우 내부적으로 fetch API를 사용 하는 버전을 사용한다면 해당 이슈는 임시적으로 없어진 것처럼 보일 수도 있다.

그렇다면 어떻게 해결 할 것인가?


<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script>
        function axiosOpenNewPage() {
            const newWindow = window.open('about:blank', '_blank')
            axios.get('.').then((x) => {
                newWindow.location.href = 'https://www.google.com'
            })
        }
    </script>
</head>
<body>
<button onclick="axiosOpenNewPage()">axios 새 창 열기</button>
</body>
</html>

위의 경우가 가장 간단한 해결방법일 것이다. 데이터를 가져오기 전에 미리 window.open을 하여 팝업 차단을 막고, 데이터를 가져온 후 페이지를 이동 혹은 데이터를 채우는 것이다.

~~개인적으로 이러한 방법 보다는 브라우저 만드시는 분들이 합의 하여 블락 할 것인지 말 것인지 결론 좀 봤으면 좋겠다.~~

코드 땜장이

이 블로그 검색

팝업이 차단 되었습니다. (회피하기)

태그

댓글

댓글 쓰기

이 블로그의 인기 게시물

아이콘 폰트 (icomoon 사용법)

javascript 압축 파일 다운로드

Chart js와 amchart 비교