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

Question

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

What is the value of `window.location.hash` in internet explorer 11? — nils, Jun 29 '15 at 15:20

score 243 · Accepted Answer · answered Jun 29 '15 at 15:21

243

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

answered Jun 29 '15 at 15:21

GOTO 0

28,453
18
97
127

1

OK well now i cannot get this to work if(window.location.hash.indexOf("?") >= 0) { //do nothing }else{ location.href = location.href+'?'; } – Erik Grosskurth Jun 29 '15 at 15:43
I need to add a ? to the end of the url if the url doesn't have one already – Erik Grosskurth Jun 29 '15 at 15:43
1

I know this is an old question and answer, but String.prototype.includes seems to be working for me on Windows 10 IE 11. – troxwalt Jun 20 '18 at 20:05
2

@troxwalt That's good to hear, but it still doesn't work on Windows 7 IE11! – nevada_scout Aug 02 '18 at 13:31
If you are **React**ing, you can use [polyfill packages](https://stackoverflow.com/a/55357349/6225838) and avoid manually adding polyfills... – CPHPython Apr 05 '19 at 10:09

score 57 · Answer 2 · answered Feb 02 '17 at 01:12

57

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

answered Feb 02 '17 at 01:12

thiagoh

6,285
8
44
74

1

you could also use the polyfill from core-js found here: https://github.com/zloirock/core-js#stage-4-proposals – David Barreto Jan 10 '18 at 19:20
@DavidBarreto indeed! And for [React, a more recent answer was added here](https://stackoverflow.com/a/55357349/6225838). – CPHPython Apr 05 '19 at 10:03

score 37 · Answer 3 · answered Oct 03 '18 at 15:32

37

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

answered Oct 03 '18 at 15:32

JCisar

1,964
2
22
24

This was posted long ago but maybe this may help someone on the newer frameworks somehow however I think the selected answer should suffice for anything outside of special use cases. – Erik Grosskurth Oct 03 '18 at 16:44
1

import 'core-js/es/array'; as of 2020 – timhc22 Mar 05 '20 at 12:01

score 15 · Answer 4 · answered Feb 08 '19 at 19:56

15

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.

answered Feb 08 '19 at 19:56

bsheps

1,034
11
22

This working for me. What does those two imports do anyway?. And what import fixed the includes error?. Or both of em are for the includes error? – iamjoshua May 29 '19 at 04:03
Since IE11 is no longer receiving feature updates by Microsoft, the javascript implementation is dated and only has support for methods thru ES5. By importing these 2 files, you are adding the polyfill scripts for Array and Object thru ES7 which includes the 'includes' method. – bsheps Jun 10 '19 at 02:34

score 6 · Answer 5 · edited Dec 30 '17 at 08:20

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

score 3 · Answer 6 · answered Sep 01 '17 at 01:02

3

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

answered Sep 01 '17 at 01:02

Moacir Rosa

136
3
9

score 1 · Answer 7 · answered Mar 26 '19 at 12:35

1

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

answered Mar 26 '19 at 12:35

BeeBee8

2,322
1
17
36

1

I started manually polyfilling all functions that fail in IE11 console... Really appreciate your time saver answer. To add those 2 packages at once to your _package.json_: `npm i --save core-js react-app-polyfill` – CPHPython Apr 05 '19 at 10:02
Btw, `core-js/es6` seems to not exist anymore in v3, so just [`import 'core-js';` as suggested in Github](https://github.com/zloirock/core-js). – CPHPython Apr 05 '19 at 10:14

score 0 · Answer 8 · answered Sep 07 '17 at 01:32

0

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.

answered Sep 07 '17 at 01:32

TecBrat

3,265
2
24
39

2

`.includes ()` works on both strings and arrays. Your `substring()` solution works only with strings and fails with arrays. As answered by other people, using `indexOf()` instead of `substring()` is better because this works in both cases. – Memet Olsen Nov 13 '17 at 12:08

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

8 Answers8

Linked