Using `window.location.hash.includes` throws “Object doesn't support property or method 'includes'” in IE11
JavascriptInternet Explorer-11Ecmascript 2016Javascript Problem Overview
I am checking the URL to see if it contains or includes a ?
in it to control the hash pop state in the window. All other browsers aren’t having an issue, only IE.
The debugger gives me this error when I try to load in this way:
> Object doesn't support property or method 'includes
'
I get no error when I load the page in through the 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')});
};
});
});
Javascript Solutions
Solution 1 - Javascript
According to the MDN reference page, includes
is not supported on Internet Explorer. The simplest alternative is to use indexOf
, like this:
if(window.location.hash.indexOf("?") >= 0) {
...
}
Solution 2 - Javascript
IE11 does implement String.prototype.includes so why not using the official 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;
}
};
}
Source: polyfill source
Solution 3 - Javascript
Adding import 'core-js/es7/array';
to my polyfill.ts
fixed the issue for me.
Solution 4 - Javascript
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.
Solution 5 - Javascript
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");
}
Solution 6 - Javascript
I've used includes
from Lodash
which is really similar to the native.
Solution 7 - Javascript
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
Solution 8 - Javascript
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.