CODEWITHSUNDEEP
javascriptinternet-explorer-11ecmascript-2016
Erik Grosskurth
Erik Grosskurth

Reputation: 3932

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

Upvotes: 176

Views: 143311

Answers (8)

BeeBee8
BeeBee8

Reputation: 3074

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

Upvotes: 1

bsheps
bsheps

Reputation: 1544

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.

Upvotes: 15

JCisar
JCisar

Reputation: 2674

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

Upvotes: 37

satish hiremath
satish hiremath

Reputation: 127

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

Upvotes: 6

TecBrat
TecBrat

Reputation: 3729

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.

Upvotes: 0

Moacir Rosa
Moacir Rosa

Reputation: 156

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

Upvotes: 3

thiagoh
thiagoh

Reputation: 7388

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

Upvotes: 57

GOTO 0
GOTO 0

Reputation: 47662

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) {
    ...
}

Upvotes: 244

Related Questions