인터넷 익스플로러 사용자를 엣지 브라우저로 이동시켜야 하는 이유

인터넷 익스플로러 사용자를 엣지 환경으로 안내하는 방법을 설명한다.

인터넷 익스플로러의 지원 종료에 따라, 웹사이트 호환성과 사용자 경험 향상을 위해 사용자를 엣지로 이동시키는 자바스크립트 코드를 제시하며, 해당 코드의 작동 원리를 분석한다.

이를 통해 익스플로러로 발생하는 문제를 방지하고 웹사이트의 품질을 높일 수 있다.

 

 

 

✨시작하며

인터넷 익스플로러의 지원이 종료되었음에도 현재까지 많은 사용자가 익스플로러를 사용하고 있다.
왜 사용자들을 엣지 환경으로 안내해야 할까?

 

바로 이 작업을 통해 웹사이트 호환성과 사용자 경험을 향상하고, 익스플로러로 인해 발생하는 여러 문제를 방지할 수 있다. 상황에 맞게 적절하게 사용하자.

 

 

 

어떻게 이동시켜야 할까?

if(/MSIE \d|Trident.*rv:/.test(navigator.userAgent)) {
  window.location = 'microsoft-edge:' + window.location;
  setTimeout(function() {
      window.location = 'https://go.microsoft.com/fwlink/?linkid=2135547';
  }, 1);
}

 

위 코드를 페이지에 삽입하면, IE로 접속할 경우 자동으로 Edge를 통해 사이트로 접속하게 된다.
setTimeout으로 인해 '이 웹 사이트가 Internet Explorer에서 작동하지 않음'이라는 제목이 나오는 Microsoft Support 페이지로 이동된다.

 

이외에도 '이 웹 사이트는 Microsoft Edge에서 더 잘 작동합니다.'라는 페이지도 존재하니 원하는 페이지로 변경해 사용하면 될 것 같다.

 

날카롭고 강력한 문장이더라도 사용자에게 혼선을 주지 않을 것 같아 나는 처음 문장인 '작동하지 않음' 페이지를 사용할 것이다.

 

 

 

코드 분석을 통해 작동 원리를 파악하기

 

이제 코드 분석을 통해 작동 원리를 하나하나 살펴보겠다!
참고로 위에서 제공한 코드는 바닐라 자바스크립트로, 프레임워크나 라이브러리를 사용하지 않은 순수한 자바스크립트다.

 

1. if(/MSIE \d|Trident.*rv:/.test(navigator.userAgent)) {
   조건문에서 현재 브라우저의 userAgent 문자열을 검사해 MSIE나 Trident가 포함되어 있는지 확인한다.
2. window.location = 'microsoft-edge:' + window.location;
   조건이 참일 때 현재 페이지 주소를 통해 MS Edge 브라우저로 이동하도록 설정한다.
3. setTimeout(function() { ... }, 1);
   1밀리 초 지연 후 실행되는 코드로, 실행 순서 제어를 위한 지연 시간이다.
4. window.location = 'https://go.microsoft.com/fwlink/?linkid=2135547';
   설정한 주소 문자열 페이지로 이동한다.

 

 

 

📜참고

• https://stackoverflow.com/questions/63404573/how-to-redirect-from-internet-explorer-to-microsoft-edge-seamlessly
• https://learn.microsoft.com/en-us/deployedge/edge-learnmore-neededge
• https://blog.qvil.dev/web/ie-to-edge-redirection