개요

AOS의 경우 window.open을 이용한 팝업이 제대로 작동하는 반면
iOS 모바일 사파리에서는 되다 안되다하는 현상이 발생 하였습니다.

window.open으로 열어주는 url에 문제가 있나 콘솔을 찍어 보았지만
아무 문제가 없음을 알게되어 혹시 iOS에서는 다르게 작동하나 찾아보니
관련 팝업 정책이 나왔습니다.

iOS와 window.open

iOS safari 팝업 제한 정책

기본적으로 Safari 에서는 사용자 Click Event 에서만 window.open 을 통한 팝업을 허용하고 있다.
보안 정책 중 하나로 Script 만으로 무분별한 팝업 호출을 제한하고자 하는 목적이다.

일반적인 window.open

클릭 이벤트로 popup을 띄우는 전형적인 예시

<a href="#" onclick="getPopup()" title="팝업안내">클릭</a>
...
function getPopup() {
    window.open('./index.html', 'INFO', '');
}

window.open 전 로직이 들어가는 경우.

사파리의 경우
window.open 전 다른 이벤트가 발생하면
함수가 실행되지 않습니다.

<a href="#" onclick="getPopup()" title="팝업안내">클릭</a>

function getPopup() {
   ...
   $.ajax({
      type: 'POST',
      ...
      success: function(data, status, xhr) {
          if (data.value == '1') {
             alert('값이 1입니다.');
          } else {
             window.open('./stone.html', 'INFO', '');
          }
      }
   });

}

해결책

window.location.href = "";

How to know device is Android or iOS

/**
 * Determine the mobile operating system.
 * This function returns one of 'iOS', 'Android', 'Windows Phone', or 'unknown'.
 *
 * @returns {String}
 */
function getMobileOperatingSystem() {
    var userAgent = navigator.userAgent || navigator.vendor || window.opera;

    // Windows Phone must come first because its UA also contains "Android"
    if (/windows phone/i.test(userAgent)) {
        return "Windows Phone";
    }

    if (/android/i.test(userAgent)) {
        return "Android";
    }

    // iOS detection from: http://stackoverflow.com/a/9039885/177710
    if (/iPad|iPhone|iPod/.test(userAgent) && !window.MSStream) {
        return "iOS";
    }

    return "unknown";
}

window 전역객체 프로퍼티 설정.

타입스크립트에서 opera 또는 MSStream가 window 객체에 없다는 오류 발생.
window 전역으로 property를 추가해주어야 합니다.

귀찮으면 @ts-ignore 박아도 되긴합니다 ㅎㅎ

declare global {
    interface Window {
        FB:any;
    }
}

let FB = window.FB; // ok now