사파리os 에서 window.open(url, '_blank')시 페이지 중복 오픈현상 버그수정

bug report

 

메인 화면에 마커 클릭시 새로운 창에서 해당 url이 나와야한다. 각 웹 브라우저(Chrome, Safari)와 모바일, 웹에서 확인결과, 사파리os 환경에서 새 창이 중복으로 '두 번' 뜨는 경우를 확인하게 되었다.

 

 

---

문제가 되는 코드

여기서 url은 해당되는 페이지의 주소이다.

 

let url = 'https://sohyunsaurus.tistory.com/'

if (url){
    window.open(url, '_blank');
}

 

 

원하는 동작

window 인터페이스인 open() 메소드는 명시된 리소스를 열리게 한다.

위의 코드 경우라면, if문절이 true라면 새로운 창에서 'https://sohyunsaurus.tistory.com/' 을 열리게 해주는 역할을 한다.

 

 

왜 이런 문제가 일어나는 걸까?

스택오버플로우에서 검색해본 결과, 브라우저들은 각각 다른 정책을 가지고 있기 때문에 window.open() 메소드가 완벽하게 호환이 되지 않을수 있다고 한다.

https://developer.mozilla.org/ 에서 Window.open() 메소드를 찾아보면 이렇다.

 

 

정확한 문제원인은 찾을 수 없지만, 두 가지 해결 방안을 찾을 수 있었다.

(원인을 알고 있다면 댓글로 남겨주세요!)

 

 

---

 

 

첫 번째 Workaround

새로운 창이 아닌 현재 탭에서 url을 열어준다. 이 방식은 새로운 팝업창을 열 필요가 없을 경우 사용할 수 있는데, 현재 작업의 경우에는 전체 지도에서 세부 지도로 이동이 필요했기 때문에 쓸 수 없었다. 하지만 제대로 작동하는 것은 확인할 수 있었다.

 

window.location.assign(url)

 

 

두 번째 Workaround

자바스크립트 setAttribute() 문법으로 프로그램적으로 새로운 탭에서 링크를 걸어 열리도록 한다.

 

const link = 'https://sohyunsaurus.tistory.com/';

const a = document.createElement('a');
a.setAttribute('href', link);
a.setAttribute('target', '_blank');
a.click();

 

 

결과

두번째 workaround로 컴파일해 테스트 서버에 올려본 결과 window.open() 메소드를 쓸 때와 동일한 결과를 얻을 수 있었다.

 

 

참고 Reference

window.open(url, '_blank'); not working on iMac/Safari