개발/프론트

아이폰 사파리에서 window.open 또는 form _blank 로 새 창이 안열리는 문제 해결

다당근 2023. 12. 20. 13:56
 

 

 

 

원인

safari에서는 비동기 호출 후 window.open 또는 form _blank로 새 창을 열 경우 열리지 않는다.

사파리는 비동기 콜 안에서 window.open으로 연 팝업을 차단한다고 한다.

 

해결 방법

방법 1. 사파리 설정에서 팝업 차단 해제하기

설정 -> safari -> 팝업 차단 해제

 

 

방법 2. 비동기 콜 전에 window.open 먼저 하기

 

* 문제가 되는 코드

// 예시 1
// 비동기 콜 호출 후 open
const result = await getData();
window.open("https://naver.com");

// 예시 2
// 비동기 콜 응답 받은 후 open
axios.getData("/api")
  .then(function (response) {
    window.open("https://naver.com");
});

 

 

* 수정 방법

 

window.open

const popup = window.open(undefined, "팝업이름"); // 팝업을 미리 연다.
const result = await getData(); // 비동기 콜
popup.location.href = "https://naver.com"; // 이동하고자 하는 url 할당

 

form.submit

const popup = window.open(undefined, "팝업이름"); // 팝업을 미리 연다.
const result = await getData(); // 비동기 콜
const form = document.createElement("form");
form.setAttribute("target", "팝업이름"); // window.open 할때 사용한 팝업 이름과 같아야 한다.
form.setAttribute("action","https://naver.com") // 이동하고자 하는 url
form.submit();