El uso de `window.location.hash.includes` arroja“ El objeto no admite la propiedad o el método 'incluye' ”en IE11

Estoy revisando la URL para ver si contiene o incluye una ?para controlar el estado del hash pop en la ventana. Todos los demás navegadores no tienen problemas, solo IE.

El depurador me da este error cuando intento cargar de esta manera:

El objeto no admite propiedad o método ' includes'

No recibo ningún error cuando cargo la página a través del estado de pop.

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

Según la página de referencia de MDN , includesno es compatible con Internet Explorer. La alternativa más simple es usar indexOf, así:

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

IE11 implementa String.prototype.includes, ¿por qué no usar el Polyfill oficial?

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

Fuente: fuente de polyfill

Agregar import 'core-js/es7/array';a mi polyfill.tssolucionó el problema para mí.

Tuve un problema similar con un proyecto angular. En mi polyfills.ts tuve que agregar ambos:

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

Además de habilitar todos los demás valores predeterminados de IE 11. (Vea los comentarios en polyfills.ts si usa angular)

Después de agregar estas importaciones, el error desapareció y mis datos de Object se completaron según lo previsto.

Al igual que en Internet Explorer, el método javascript "incluye" no es compatible, lo que lleva al error que se muestra a continuación

dijit.form.FilteringSelect TypeError: el objeto no admite la propiedad o el método 'incluye'

Así que he cambiado el método de cadena de JavaScript de "incluye" a "indexOf" como se muestra a continuación

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

He usado includesde Lodashlos cuales es muy similar a la nativa.

Estoy usando ReactJs y lo utilicé import 'core-js/es6/string';al principio index.jspara resolver mi problema.

También estoy usando import 'react-app-polyfill/ie11';para admitir la ejecución de React en IE11.

react-app-polyfill

Este paquete incluye polyfills para varios navegadores. Incluye requisitos mínimos y características de lenguaje de uso común utilizadas por los proyectos Create React App.

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

Esta pregunta y sus respuestas me llevaron a mi propia solución (con la ayuda de SO), aunque algunos dicen que no debes manipular los prototipos nativos:

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

Entonces Acabo de cambiar todo .includes()con .doesInclude()y mi problema fue resuelto.