[IE] Polyfill 사용하기 (+ slice, readAsBinaryString)

이제 IE 는 버릴 때도 되었건만... 아직도 버리지 않아서 어렵군요.

 

1. 폴리필 (Polyfill) 이란?

-  간단하게 말하자면 최신 자바스크립트의 기능을 지원하지 않아서 오류가 나는 소스를 구형 자바스크립트 코드로 똑같이 구현하는 방식이다.

보통 IE 에서 지원되지 않는 게 많아서 Chrome -> IE 에 동일하게 기능 적용을 할 때 찾아보게 되는 것 같다.

 

 

2. Polyfill.io

간단하게는 아래 사이트에 들어가서, 원하는 기능을 클릭 => 생성된 스크립트를 복사하여 상단에 넣어주면 된다.

 

사이트 : https://polyfill.io/v3/url-builder/

 

index.html

<script src="https://polyfill.io/v3/polyfill.min.js?features=Array.from%2CArray.isArray"></script>

 

 

실제 생성된 .js 경로에 직접 접근해보면, IE 에서는 소스가 생성되는 데에 반해 Chrome 에서는 지원이 필요하지 않다는 문구가 출력되는 걸 볼 수 있다.

 

 

 

아래는 해당 리스트에는 포함되어 있지 않은 함수(특정 케이스에서만 발생하는 것들) 이 있어서 참고한 소스를 추가로 작성한다.

 

1. slice

개체가 속성이나 메서드를 지원하지 않습니다.

배열 객체 등에서 slice를 실행해보면 원래 동작을 안하는 메소드는 아니다. 다만, 특정 개체에 해당 메소드가 없어서 발생 할 수는 있다.

어떤 개체에 없는 지 오류 위치를 확인한 후에 추가를 해주면 된다.

	if (!Uint8Array.prototype.slice) {
		Object.defineProperty(Uint8Array.prototype, 'slice', {
		value: function (begin, end) {
			return new Uint8Array(Array.prototype.slice.call(this, begin, end));
		}});
	}

 

 

2.readAsBinaryString

	if (!FileReader.prototype.readAsBinaryString) {
		FileReader.prototype.readAsBinaryString = function (fileData) {
			var binary = "";
			var pt = this;
			var reader = new FileReader();
			reader.onload = function (e) {
				var bytes = new Uint8Array(reader.result);
				var length = bytes.byteLength;
				for (var i = 0; i < length; i++) {
					binary += String.fromCharCode(bytes[i]);
				}
				//pt.result  - readonly so assign binary
				pt.content = binary;
				$(pt).trigger('onload');
			}
			reader.readAsArrayBuffer(fileData);
		}
	}

 

실행 위치에도 소스를 추가해주어야 한다.

var reader = new FileReader();
reader.onload = function (e) {
   var fileData = (!e) ? reader.content : e.target.result;
      ....

};

reader.readAsBinaryString(file);

 

 

 

참고 : 
https://github.com/Hopding/pdf-lib/issues/277

https://stackoverflow.com/questions/31391207/javascript-readasbinarystring-function-on-e11

https://dev.to/umerjaved178/polyfills-for-foreach-map-filter-reduce-in-javascript-1h13
https://m.blog.naver.com/PostView.naver?isHttpsRedirect=true&blogId=taeho8310&logNo=222089330263