IE11에서`window.location.hash.includes`를 사용하면“개체가 속성이나 메서드 'includes'를 지원하지 않습니다 '
?창에서 해시 팝 상태를 제어 하기 위해 URL에 URL이 포함되어 있는지 또는 포함되어 있는지 확인하고 있습니다 . 다른 모든 브라우저에는 문제가 없으며 IE 만 있습니다.
이런 식으로로드하려고하면 디버거 에서이 오류가 발생합니다.
개체가 속성 또는 메서드를 지원하지 않습니다 '
includes'
popstate를 통해 페이지를로드 할 때 오류가 발생하지 않습니다.
$(document).ready(function(e) {
if(window.location.hash) {
var hash;
if(window.location.hash.includes("?")) {
alert('I have a ?');
hash = window.location.hash.substring(window.location.hash.indexOf('#') + 0,window.location.hash.indexOf('?'));
}else {
hash = window.location.hash;
};
if (hash=="#DRS" || hash=="#DRP" || hash=="#DFFI" || hash=="#DCI" || hash=="#DCP" || hash=="#DRP" || hash=="#DRMA" || hash=="#EICS" || hash=="#ORG"){
$(hash+'Content').addClass('pageOn').removeClass('pageOff');
}else {
$('#homeContent').addClass('pageOn').removeClass('pageOff');
};
} else {
$('#homeContent').addClass('pageOn').removeClass('pageOff');
}
$(window).on('popstate', function() {
var hash;
if(window.location.hash.includes("?")) {
hash = window.location.hash.substring(window.location.hash.indexOf('#') + 0,window.location.hash.indexOf('?'));
}else {
hash = window.location.hash;
};
if (hash=="#DRS" || hash=="#DRP" || hash=="#DFFI" || hash=="#DCI" || hash=="#DCP" || hash=="#DRP" || hash=="#DRMA" || hash=="#EICS" || hash=="#ORG"){
$(this).navigate({target: $(hash+'Content')});
if(window.location.hash.includes("?")) {
}else{
location.href = location.href+'?';
}
}else {
$(this).navigate({target: $('#homeContent')});
};
});
});
에 따르면 MDN 참조 페이지 , includes인터넷 익스플로러에서 지원되지 않습니다. 가장 간단한 대안은 indexOf다음과 같이 를 사용하는 것입니다.
if(window.location.hash.indexOf("?") >= 0) {
...
}
IE11은 String.prototype.includes를 구현하므로 공식 Polyfill을 사용하지 않는 이유는 무엇입니까?
if (!String.prototype.includes) {
String.prototype.includes = function(search, start) {
if (typeof start !== 'number') {
start = 0;
}
if (start + search.length > this.length) {
return false;
} else {
return this.indexOf(search, start) !== -1;
}
};
}
출처 : 폴리 필 소스
Adding import 'core-js/es7/array'; to my polyfill.ts fixed the issue for me.
I had a similar issue with an Angular project. In my polyfills.ts I had to add both:
import "core-js/es7/array";
import "core-js/es7/object";
In addition to enabling all the other IE 11 defaults. (See comments in polyfills.ts if using angular)
After adding these imports the error went away and my Object data populated as intended.
As in Internet Explorer, the javascript method "includes" doesn't support which is leading to the error as below
dijit.form.FilteringSelect TypeError: Object doesn't support property or method 'includes'
So I have changed the JavaScript string method from "includes" to "indexOf" as below
//str1 doesn't match str2 w.r.t index, so it will try to add object
var str1="acd", str2="b";
if(str1.indexOf(str2) == -1)
{
alert("add object");
}
else
{
alert("object not added");
}
I've used includes from Lodash which is really similar to the native.
I'm using ReactJs and used import 'core-js/es6/string'; at the start of index.js to solve my problem.
I'm also using import 'react-app-polyfill/ie11'; to support running React in IE11.
react-app-polyfill
This package includes polyfills for various browsers. It includes minimum requirements and commonly used language features used by Create React App projects.
https://github.com/facebook/create-react-app/blob/master/packages/react-app-polyfill/README.md
This question and its answers led me to my own solution (with help from SO), though some say you shouldn't tamper with native prototypes:
// IE does not support .includes() so I'm making my own:
String.prototype.doesInclude=function(needle){
return this.substring(needle) != -1;
}
Then I just replaced all .includes() with .doesInclude() and my problem was solved.