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


173

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

¿Cuál es el valor de window.location.hashinternet explorer 11?
nils

Respuestas:


242

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) {
    ...
}

1
Bien, ahora no puedo hacer que esto funcione si (window.location.hash.indexOf ("?")> = 0) {// do nothing} else {location.href = location.href + '?'; }
Erik Grosskurth

Necesito agregar un? hasta el final de la url si la url aún no tiene una
Erik Grosskurth

1
Sé que esta es una vieja pregunta y respuesta, pero String.prototype.includes parece estar funcionando para mí en Windows 10 IE 11.
troxwalt

2
@troxwalt Es bueno escucharlo, ¡pero todavía no funciona en Windows 7 IE11!
nevada_scout

Si está Reaccionando , puede usar paquetes de polyfill y evitar agregar manualmente polyfills ...
CPHPython

58

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


1
también puede usar el polyfill de core-js que se encuentra aquí: github.com/zloirock/core-js#stage-4-proposals
David Barreto


36

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


Esto se publicó hace mucho tiempo, pero tal vez esto pueda ayudar a alguien en los marcos más nuevos de alguna manera, sin embargo, creo que la respuesta seleccionada debería ser suficiente para cualquier cosa fuera de los casos de uso especial.
Erik Grosskurth

1
importar 'core-js / es / array'; a partir de 2020
timhc22

14

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.


Esto funciona para mi. ¿Qué hacen esas dos importaciones de todos modos? ¿Y qué importación solucionó el error incluye? ¿O ambos son para el error incluye?
iamjoshua

Como IE11 ya no recibe actualizaciones de funciones de Microsoft, la implementación de JavaScript está fechada y solo es compatible con los métodos a través de ES5. Al importar estos 2 archivos, está agregando los scripts de polyfill para Array y Object a través de ES7 que incluye el método 'incluye'.
bsheps

5

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


1

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


1
Comencé a rellenar manualmente todas las funciones que fallan en la consola IE11 ... Realmente aprecio su respuesta de ahorro de tiempo. Para agregar esos 2 paquetes a la vez a su package.json :npm i --save core-js react-app-polyfill
CPHPython

Por cierto, core-js/es6parece que ya no existe en v3, así que tal import 'core-js';como se sugiere en Github .
CPHPython

0

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.


2
.includes ()funciona tanto en cadenas como en matrices. Su substring()solución solo funciona con cadenas y falla con las matrices. Como respondieron otras personas, usar en indexOf()lugar de substring()es mejor porque esto funciona en ambos casos.
Memet Olsen
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.