Using `window.location.hash.includes` throws “Object doesn’t support property or method ‘includes’” in IE11

Using `window.location.hash.includes` throws “Object doesn’t support property or method ‘includes’” in IE11

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’)});
};
});
});

Related:  How to capture all scrolling events on a page without attaching an onscroll handler to every single container

Solutions/Answers:

Solution 1:

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:

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:

Adding import 'core-js/es7/array'; to my polyfill.ts fixed the issue for me.

Solution 4:

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:

As in Internet Explorer, the javascript method “includes” doesn’t support which is leading to the error as below

Related:  Use ASP.NET Resource strings from within javascript files

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:

I’ve used includes from Lodash which is really similar to the native.