javascript - Att använda `window.location.hash.includes` ger felmeddelandet "Object doesn't support property or method 'includes'" i IE11

Jag kontrollerar URL:en för att se om den innehåller eller inkluderar en ? för att kontrollera hash-pop-tillståndet i fönstret. Alla andra webbläsare har inga problem, bara IE.

Debuggern ger mig detta fel när jag försöker ladda på detta sätt:

Objektet stöder inte egenskapen eller metoden 'includes'

Jag får inget fel när jag laddar sidan via 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')});
            };
        });
});

Svar #1

Enligt MDN:s referenssida stöds includes inte på Internet Explorer. Det enklaste alternativet är att använda indexOf, så här:

if(window.location.hash.indexOf("?") >= 0) {
    ...
}

Svar #2

IE11 implementerar String.prototype.includes, så varför inte använda det officiella 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;
      }
    };
  }

Källa: polyfill-källa

Svar #3

Att lägga till import 'core-js/es7/array'; i min polyfill.ts löste problemet för mig.

Svar #4

Jag hade ett liknande problem med ett Angular-projekt. I min polyfills.ts var jag tvungen att lägga till båda:

    import "core-js/es7/array";
    import "core-js/es7/object";

Förutom att aktivera alla andra standardinställningar för IE 11. (Se kommentarer i polyfills.ts om du använder Angular)

Efter att ha lagt till dessa importeringar försvann felet och mina objektdata fylldes på som avsett.

Relaterade artiklar