L'utilisation de `window.location.hash.includes` lance" L'objet ne prend pas en charge la propriété ou la méthode 'includes' "dans IE11

Je vérifie l'URL pour voir si elle contient ou inclut un ?pour contrôler l'état pop de hachage dans la fenêtre. Tous les autres navigateurs n'ont pas de problème, seulement IE.

Le débogueur me donne cette erreur lorsque j'essaye de charger de cette manière:

L'objet ne prend pas en charge la propriété ou la méthode ' includes'

Je n'obtiens aucune erreur lorsque je charge la page via le 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')});
            };
        });
});

Selon la page de référence MDN , includesn'est pas pris en charge sur Internet Explorer. L'alternative la plus simple est d'utiliser indexOf, comme ceci:

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

IE11 implémente String.prototype.includes, alors pourquoi ne pas utiliser le Polyfill officiel?

  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: source polyfill

L'ajout import 'core-js/es7/array';à mon a polyfill.tscorrigé le problème pour moi.

J'ai eu un problème similaire avec un projet angulaire. Dans mes polyfills.ts, j'ai dû ajouter les deux:

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

En plus d'activer toutes les autres valeurs par défaut d'IE 11. (Voir les commentaires dans polyfills.ts si vous utilisez angular)

Après avoir ajouté ces importations, l'erreur a disparu et mes données d'objet ont été remplies comme prévu.

Comme dans Internet Explorer, la méthode javascript "comprend" ne prend pas en charge ce qui conduit à l'erreur comme ci-dessous

dijit.form.FilteringSelect TypeError: l'objet ne prend pas en charge la propriété ou la méthode 'includes'

J'ai donc changé la méthode de chaîne JavaScript de "includes" à "indexOf" comme ci-dessous

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

J'ai utilisé à includespartir de Lodashlaquelle est vraiment similaire à l'indigène.

J'utilise ReactJs et je l'utilise import 'core-js/es6/string';au début index.jspour résoudre mon problème.

J'utilise également import 'react-app-polyfill/ie11';pour prendre en charge l'exécution de React dans IE11.

réagir-app-polyfill

Ce package comprend des polyfills pour différents navigateurs. Il inclut les exigences minimales et les fonctionnalités linguistiques couramment utilisées utilisées par les projets Create React App.

https://github.com/facebook/create-react-app/blob/master/packages/react-app-polyfill/README.md

Cette question et ses réponses m'ont conduit à ma propre solution (avec l'aide de SO), même si certains disent que vous ne devriez pas altérer les prototypes natifs:

  // IE does not support .includes() so I'm making my own:
  String.prototype.doesInclude=function(needle){
    return this.substring(needle) != -1;
  }

Ensuite, j'ai tout remplacé .includes()par .doesInclude()et mon problème a été résolu.