인터넷 익스플로러 ✨엣지(edge) 자동전환

💩 인터넷 익스플로러 엣지(edge) 자동전환

안녕하세요 TriplexLab입니다. :)
인터넷에 떠 돌고 있는 인터넷 익스플로러에서 자동으로 엣지로 리다이렉트 되는 코드를 가지고 
커스터마이징 했습니다. 필요하신 분은 사용하세요!

요즘 인터넷 익스프로러 창을 열러고할때
마이크로소프트 익스플로러 엣지(edge)로 자동전환되서 화면이 열리는 현상이 일어나고 있습니다.

2022년 6월에 마이크로소프트는 인터넷 익스프로러 서비스를 완전히 종료한다고 발표했습니다.
그래서 미리미리 준비했습니다. 조금 이라도 빨리 엣지 브라우저에 적응 하시라고 
(이왕이면 크롬브라우저 사용하시면 좋겠네요! 이글을 보고 있는 개발자 분들은 크롬을 쓰시겠지만...)

물론 엣지 브라우저에서 아래와 같이 설정을 변경해서 IE11를 계속 사용하실수 있습니다. 

엣지 브라우저 설정 변경 가능

제가 아래에 작성해 놓은 코드도 이와같이 설정을 '안함' 또는 '호환되지 않는 사이트만(권장)'으로 해주셔야만 적용이 되는 코드 입니다. 

✍️ 익스플로러 엣지 자동전환의 코드

(function () {
var viewModel = {
  templateIE: function (browser, version) {
    var template = '';
    template += '<div class="result_inner">';
    template += '<h2 class="tit">저희 사이트는 ' + browser + '' + version + '을 지원하지 않습니다.</h2>';
    template += '<h2 class="tit">크롬 브라우저에 최적화 되어 있습니다.</h2>';
    template += '<a class="result_button" href="https://www.google.com/intl/ko/chrome/">크롬브라우저 다운받기</a>';
    template += '</div>';
    document.querySelector('body').innerHTML = template;
    window.location = 'microsoft-edge:' + window.location.href;
  },
};

var detectIE = function () {
  var ua = window.navigator.userAgent;
  var msie = ua.indexOf('MSIE');
  if (msie > 0) {
  	// IE 10 이상 버전 채크
  	return parseInt(ua.substring(msie + 5, ua.indexOf('.', msie)), 10);
  }
  var trident = ua.indexOf('Trident/');
  if (trident > 0) {
    // IE 11 버전 체크
    var rv = ua.indexOf('rv:');
    return parseInt(ua.substring(rv + 3, ua.indexOf('.', rv)), 10);
  }
  // 다른 브라우저 리턴
  return false;
};

// IE 또는 Edge 브라우저 버전 가져오기
var version = detectIE();

if (version) {
  return viewModel.templateIE('IE', version);
}
})();

위코드를 파일로 제공합니다. 
한번 다운받으셔서 test해보세요.

아래 파일을 테스트 해보기 위해서는 다운로드 받은 파일을 서버에 반영하시고,
인터넷 익스플로러에서 접속해보셔야 test해 볼수 있습니다.

index.html

0.00MB

 

---

👉한가지 더 살펴 보면

사이트 경량화 관점에서 보면 개선할 필요가 있습니다.
createDocumentFragment 메소드를 사용하여 한 번에 DOM을 추가하여 DOM 접근을 최소화할 수 있습니다.

<script>
      (function () {
        var body = document.querySelector('body');
        var docfrag = document.createDocumentFragment();
        var div_inner = document.createElement("div");
        var div = document.createElement("div");
        var h2 = document.createElement("h2");
        var h2El = document.createElement("h2");
        var a = document.createElement("a");

        var viewModel = {
          templateIE: function (browser, version) {           
            div.classList.add('result_inner');
            h2.classList.add('tit');
            h2.textContent = '저희 사이트는 ' + browser + '' + version + '을 지원하지 않습니다.'
            h2El.classList.add('tit');
            h2El.textContent = '크롬 브라우저에 최적화 되어 있습니다.'
            a.classList.add('result_button');
            a.setAttribute('href', 'https://www.google.com/intl/ko/chrome/');
            a.textContent = '크롬브라우저 다운받기';
            div.appendChild(h2);
            div.appendChild(h2El);
            div.appendChild(a);
            docfrag.appendChild(div);
            div_inner.appendChild(docfrag.cloneNode(true)); //docfrag를 복사 합해서 div_inner에 넣습니다. 
            
            body.innerHTML = div_inner.innerHTML
            window.location = 'microsoft-edge:' + window.location.href;
          },
        };

        var detectIE = function () {
          var ua = window.navigator.userAgent;
          var msie = ua.indexOf('MSIE');
          if (msie > 0) {
            // IE 10 이상 버전 채크
            return parseInt(ua.substring(msie + 5, ua.indexOf('.', msie)), 10);
          }
          var trident = ua.indexOf('Trident/');
          if (trident > 0) {
            // IE 11 버전 체크
            var rv = ua.indexOf('rv:');
            return parseInt(ua.substring(rv + 3, ua.indexOf('.', rv)), 10);
          }
          // 다른 브라우저 리턴
          return false;
        };

        // IE 또는 Edge 브라우저 버전 가져오기
        var version = detectIE();

        if (version) {
          return viewModel.templateIE('IE', version);
        }
      })();
</script>

 

index.html

0.00MB