[개발/자바스크립트] window.open 서로 다른 브라우저 호출시 의미없는 팝업 생성

IE에서 Edge를 호출하는 로직을 개발하는 중 처음에 타겟(target) 옵션을 `_blank`로 테스트를 진행했습니다.

결과는 IE에 빈 팝업창이 하나 뜨고 그 후에 제가 호출한 url을 띄우는 Edge 팝업창이 호출되었습니다.

사용자 입장에서 의미없는 팝업창이 하나 더 뜬 거라 이 현상을 해결해야 했습니다.

 

우선 해결 방법은 타겟 옵션을 `_self`로 변경하면 됩니다.

IE에서 `window.open`의 타겟을 `_blank`로 설정했을 때와 `_self`로 설정했을 때 동작 방식이

다른 이유는 IE에서의 새 창 생성 프로세스와 현재 창을 재사용하는 방식 때문입니다.

1. _blank의 동작: 새 창 또는 탭 생성

• `_blank`는 항상 새 창(또는 탭)을 생성하려고 시도합니다.
• IE에서 새 창을 열면 IE 자체가 새 창을 초기화한 후에 URL을 로드합니다.
• URL이 `microsoft-edge:`로 시작할 경우, IE는 새 창에서 Edge를 호출하는 명령을 처리합니다.

결과

• IE 팝업 창이 잠시 나타난 후 Microsoft Edge가 실행됩니다.
• 사용자는 중간에 불필요한 빈 팝업 창을 보게 됩니다.

2. _self의 동작: 기존 창에서 URL 로드

• `_self`는 현재 창에서 URL을 로드합니다.
• IE는 새 창을 생성하지 않고, 현재 창에서 `microsoft-edge:` 프로토콜을 처리합니다.
• Edge를 호출하는 명령은 바로 실행되며, IE는 추가적인 팝업 창을 생성하지 않습니다.

결과

• IE에서 빈 팝업 창이 나타나지 않고 바로 Microsoft Edge가 실행됩니다.

[개발/자바스크립트] 끔찍한 IE(인터넷 익스플로러)에서 Edge 브라우저 호출 방법

 

[개발/자바스크립트] window.open target 옵션 종류별 동작 설명