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
– nils, Commented Jun 29, 2015 at 15:20

GOTO 0 · Accepted Answer · 2015-06-29 15:21:43Z

244

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, 2015 at 15:21

GOTO 0

48.8k25 gold badges139 silver badges165 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Erik Grosskurth Over a year ago

OK well now i cannot get this to work if(window.location.hash.indexOf("?") >= 0) { //do nothing }else{ location.href = location.href+'?'; }

Erik Grosskurth Over a year ago

I need to add a ? to the end of the url if the url doesn't have one already

troxwalt Over a year ago

I know this is an old question and answer, but String.prototype.includes seems to be working for me on Windows 10 IE 11.

nevada_scout Over a year ago

@troxwalt That's good to hear, but it still doesn't work on Windows 7 IE11!

CPHPython Over a year ago

If you are Reacting, you can use polyfill packages and avoid manually adding polyfills...

thiagoh · Accepted Answer · 2017-02-02 01:12:05Z

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 2, 2017 at 1:12

thiagoh

7,4588 gold badges55 silver badges78 bronze badges

2 Comments

David Barreto Over a year ago

you could also use the polyfill from core-js found here: github.com/zloirock/core-js#stage-4-proposals

CPHPython Over a year ago

@DavidBarreto indeed! And for React, a more recent answer was added here.

JCisar · Accepted Answer · 2018-10-03 15:32:28Z

37

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

answered Oct 3, 2018 at 15:32

JCisar

2,6843 gold badges32 silver badges28 bronze badges

2 Comments

Erik Grosskurth Over a year ago

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.

timhc22 Over a year ago

import 'core-js/es/array'; as of 2020

bsheps · Accepted Answer · 2019-02-08 19:56:46Z

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 8, 2019 at 19:56

bsheps

1,5641 gold badge18 silver badges28 bronze badges

2 Comments

iamjoshua Over a year ago

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?

bsheps Over a year ago

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.

Alexis Tyler · Accepted Answer · 2017-12-30 08:20:58Z

6

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

edited Dec 30, 2017 at 8:20

Alexis Tyler

9766 gold badges32 silver badges51 bronze badges

answered Apr 1, 2016 at 10:52

satish hiremath

1271 silver badge4 bronze badges

Comments

Moacir Rosa · Accepted Answer · 2017-09-01 01:02:56Z

3

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

answered Sep 1, 2017 at 1:02

Moacir Rosa

1562 silver badges9 bronze badges

Comments

BeeBee8 · Accepted Answer · 2019-03-26 12:35:38Z

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, 2019 at 12:35

BeeBee8

3,0842 gold badges30 silver badges39 bronze badges

2 Comments

CPHPython Over a year ago

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 Over a year ago

Btw, core-js/es6 seems to not exist anymore in v3, so just import 'core-js'; as suggested in Github.

TecBrat · Accepted Answer · 2017-09-07 01:32:08Z

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 7, 2017 at 1:32

TecBrat

3,7353 gold badges31 silver badges49 bronze badges

1 Comment

Memet Olsen Over a year ago

.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.

Collectives™ on Stack Overflow

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

8 Answers 8

5 Comments

2 Comments

2 Comments

2 Comments

Comments

Comments

2 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

8 Answers 8

5 Comments

2 Comments

2 Comments

2 Comments

Comments

Comments

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related