사파리는 팝업차단을 알려주지 않아.

웹 프론트엔드 개발 중.

신용카드 경제를 위해 PG사 페이지를 호출하는데 새창으로 열리도록 했더니,

아이폰 사파리에서 그냥 허연 화면만 나온다...

로딩중인가?

생각하고 기다려도 아무 반응이 없다.

 

요즘 브라우저들 트렌드 처럼 팝업제한이 적용되어 있는데,

이걸 해제할건지 (한번 허용? 항상 허용?) 물어보는 절차 따위 없이 그냥 안열어준다.

애플은 단호하다.

 

젠장.

 

우회 방법 구글링해보고 기억하기 위해서 블로그에 기록해둔다.

 

정확히는 사파리가 비공기 function 안에서 open 하는 팝업을 차단한다고 한다.

1.빈(blank) 팝업을 열고.
2.필요한 비동기콜을 수행한 후
3.아까 열어둔 팝업의 location.url을 바꾼다.

  2와 1이 바뀌어도 차단된다고 한다.

또 어떤 글에서는 1,000ms 이내에 수행하면 열린다는 글도 있는데, 믿을 수 없다. (모른다.)

 

Before. 기존 차단 당하던 호출

requestBilling().then(url => {
  var popup = window.open(
    url,
    "billing",
    "top=20, left=20, width=600, height=800, status=no, menubar=no, toolbar=no, resizable=no"
  )
})

 

살포시 async 로 수행하고 비동기 콜이 아닌척 해봐도 차단당한다.

const url = await requestBilling()
var popup = window.open(
  url,
  "billing",
  "top=20, left=20, width=600, height=800, status=no, menubar=no, toolbar=no, resizable=no"
)

 

After. 우회하는 호출

var popup = window.open(
  undefined,
  "billing",
  "top=20, left=20, width=600, height=800, status=no, menubar=no, toolbar=no, resizable=no"
)
const url = await requestBilling()
popup.location.href = url

 

아 근데 이것도 정식 코드는 아니라서 언제까지 유효할지 알수없다.

결제 못 받으면 그냥 망하는건데... 어쩌지.