web-dev-qa-db-fra.com

IE11 - L'objet ne prend pas en charge la propriété ou la méthode 'includes' - javascript window.location.hash

Je vérifie l'URL pour voir s'il contient ou inclut un? en elle pour contrôler l’état de hash pop dans la fenêtre. Tous les autres navigateurs n'ont pas de problème uniquement IE.

Le débogueur me donne cette erreur lorsque j'essaie de charger de cette manière. Object ne prend pas en charge la propriété ou la méthode 'includes'.

Je ne reçois aucune erreur quand je charge la page dans 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')});
            };
        });
});
javascripthashinternet-explorer-11window.locationpopstate
135
Erik Grosskurth

Selon la page de référence MDN , includes n'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) {
    ...
}
205
GOTO 0

IE11 implémente String.prototype.includes alors pourquoi ne pas utiliser le logiciel officiel 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: source polyfill

48
thiagoh

Ajouter import 'core-js/es7/array'; à mon polyfill.ts a résolu le problème pour moi.

18
JCisar

J'ai utilisé includes from Lodash qui est vraiment similaire à l'indigène.

3
Moacir Rosa

Comme dans Internet Explorer, la méthode javascript "includes" ne prend pas en charge, ce qui entraîne l'erreur 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");
}
2
satish hiremath

J'utilise ReactJs et ai utilisé import 'core-js/es6/string'; au début de index.js pour 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 paquet comprend des polyfill pour différents navigateurs. Il inclut la configuration minimale requise et les fonctionnalités linguistiques couramment utilisées dans les projets Create React App.

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

1
Bhushan Babar

J'ai eu un problème similaire avec un projet angulaire. Dans mes polyfills.ts je devais ajouter les deux: 

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

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

Après l’ajout de ces importations, l’erreur est disparue et les données de mon objet ont été remplies comme prévu.

1
bsheps

Cette question et ses réponses m'ont amené à ma propre solution (avec l'aide de SO), bien que certains disent que vous ne devriez pas toucher aux prototypes natifs:

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

Ensuite, je viens de remplacer tout .includes() par .doesInclude() et mon problème a été résolu.

0
TecBrat