[IE] 버전 이슈 대응 방법 여러가지 (script 대체, 레지스트리, JSON 등)

최근에 사용자의 IE 버전이 5 부터 접근이 되는 웹페이지를 유지보수 하게 되었다.
개인적으로 IE는 버렸으면 좋겠지만... 어쨌든 작업하면서 대응했던 오류 등을 업데이트 할 생각이다.

 

 

1) IE 문서모드 변경해주기 (메타 태그 삽입)

: 내 IE 브라우저가 상위버전이 설치되어 있더라도, 어떤 페이지를 접근하면 기본값이 하위버전으로 변경되는 경우가 있다.

이런 경우, 각 버전마다 작동하는 스크립트, CSS 등이 달라서 사용자 경험이 달라지게 된다. 개발자가 header 부분에 메타 태그를 삽입해주므로써 방지할 수 있다.

IE 하위버전을 바라보고 있는 상태

 

* 삽입 소스 :

content="" 에는 문서모드를 입력해주면 되지만, 대부분 Edge로 사용하고 있는 것으로 보인다.

<meta http-equiv="X-UA-Compatible" content="IE=Edge">

 

 

하지만, 해당 페이지가 <iframe> 태그로 엮인 하위페이지인 경우에는 동작하지 않는다.

- 관련 페이지 : 

https://stackoverflow.com/questions/12641511/trying-to-use-ie-edge-x-ua-compatible-in-an-iframe-on-a-page-using-ie-emulateie7

상위 페이지에 삽입해주면 이슈가 해결되겠으나, IE 상위버전에서 모든 하위버전이 포함되는 것은 아니므로 조심스러워진다. 신규 개발 페이지에서는 Iframe 사용을 지양하고, 기존 페이지에서는 어쩔 수 없이 대응하는 것이 좋을듯하다.

 

 

 

 

2) 기본 IE 브라우저 버전을 레지스트리에 등록

: 사용자의 IE 브라우저의 기본 참조 버전을 레지스트리에 등록하여 상위/하위버전으로 접근할 수 있도록 한다.

현실적으로 사용자가 많을 경우에는 대응이 어려운 방법이나, 특정 버전에서 테스트를 해야하거나, 사용자가 적은 경우에는 괜찮은 방법

 

1. [WIN] + R 키를 누른 후 regedit 을 입력한다.

2. [레지스트리 편집기] 에서 아래 위치로 이동한다.

컴퓨터\HKEY_CURRENT_USER\Software\Microsoft\Internet Explorer\Main\FeatureControl\FEATURE_BROWSER_EMULATION

 

3. 우측 클릭 > 새로 만들기 > DWORD(32비트) 선택 

3. 이름은 iexplore.exe로, 단위는 10진수를 선택하고 값은 IE9 버전인 경우, 9999로 입력한다.

=> 9999로 입력하면, internet explorer 버전이 9로 실행되고, 다른 버전은 아래 표를 참고한다.

 

 

각 버전에 대한 코드표

 

출처: https://www.concise.com/blog/run-old-versions-internet-explorer-windows-10/

 

 

 

 

3) getElementsByClassName

: 클래스 명칭으로 태그를 가져오는 위 javascript 코드는 IE8 이하 버전에서 동작하지 않는다.

따라서 querySelctor 로 변경해준다.

document.querySelector("#test");

하지만, 해당 코드도 IE 7에서는 동작하지 않으므로, 그런 경우에는 아래 소스를 추가해주자.

// IE7 support for querySelectorAll. Supports multiple / grouped selectors and the attribute selector with a "for" attribute. http://www.codecouch.com/
(function(d, s) {
	d=document, s=d.createStyleSheet();
	d.querySelectorAll = function(r, c, i, j, a) {
		a=d.all, c=[], r = r.replace(/\[for\b/gi, '[htmlFor').split(',');
		for (i=r.length; i--;) {
			s.addRule(r[i], 'k:v');
			for (j=a.length; j--;) a[j].currentStyle.k && c.push(a[j]);
			s.removeRule(0);
		}
		return c;
	}
})()


출처: https://haru.kafra.kr/88 [어제도 오늘도 내일도 언제나 하루]

출처 : https://haru.kafra.kr/88

 

 

 

 

4) JSON.stringify 오류 ('JSON'이(가) 정의되지 않았습니다.)

: JSON Object를 string 으로 바꿔주는 펑션이 IE 하위버전에서 작동하지 않는 이슈를 발견하였다.

아예 JSON 을 못찾는 이슈인 것으로 보이며 아래 코드를 삽입해주었다.

IE5 버전에서 발생한 오류 화면

 

소스 설명 : JSON 이 있는 경우와 JSON.stringify 가 있는 경우에는 정상 동작. 없으면 신규로 생성하여 동작하게끔 한다.

 

if (!JSON) var JSON = {};
JSON.stringify = JSON.stringify || function (obj) {
    var t = typeof (obj);
    if (t != "object" || obj === null) {
        // simple data type
        if (t == "string") obj = '"'+obj+'"';
        return String(obj);
    }
    else {
        // recurse array or object
        var n, v, json = [], arr = (obj && obj.constructor == Array);
        for (n in obj) {
            v = obj[n]; t = typeof(v);
            if (t == "string") v = '"'+v+'"';
            else if (t == "object" && v !== null) v = JSON.stringify(v);
            json.push((arr ? "" : '"' + n + '":') + String(v));
        }
        return (arr ? "[" : "{") + String(json) + (arr ? "]" : "}");
    }
};

 

출처는 jQuery 를 확장하는 방법 : https://mygumi.tistory.com/5

 

 

이렇게 정리하고 보니 IE 는 문제가 정말 어마어마한 것 같다. 여기 없는 이슈들도 분명 나중에 또 헤맬텐데, 진작 정리 좀 해둘걸 하고 후회된다.

하루 빨리 IE를 안쓰는 날이 오면 좋겠다..☆