Usando `window.location.hash.includes` lança" O objeto não suporta propriedade ou método 'includes' "no IE11

173

Estou verificando o URL para ver se ele contém ou inclui um ?para controlar o estado do pop-up na janela. Todos os outros navegadores não estão tendo problemas, apenas o IE.

O depurador me dá esse erro quando tento carregar desta maneira:

O objeto não suporta propriedade ou método ' includes'

Não recebo nenhum erro ao carregar a página no 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')});
            };
        });
});
Erik Grosskurth
fonte
Qual é o valor do window.location.hashInternet Explorer 11?
N /

Respostas:

242

De acordo com a página de referência do MDN , includesnão há suporte para o Internet Explorer. A alternativa mais simples é usar indexOf, assim:

if(window.location.hash.indexOf("?") >= 0) {
    ...
}
GOTO 0
fonte
1
OK, bem, agora não consigo fazer isso funcionar se (window.location.hash.indexOf ("?")> = 0) {// não fazer nada} mais {location.href = location.href + '?'; }
Erik Grosskurth
Eu preciso adicionar um? até o final do URL se o URL ainda não tiver um #
Erik Grosskurth
1
Eu sei que isto é uma questão antiga e resposta, mas String.prototype.includes parece estar funcionando para mim no Windows 10 IE 11.
troxwalt
2
@troxwalt É bom ouvir isso, mas ainda não funciona no Windows 7 IE11!
Nevada_scout 2/08
Se você está Reagir ing, você pode usar pacotes de polyfill e evitar adicionar manualmente polyfills ...
CPHPython
58

O IE11 implementa String.prototype.includes, por que não usar o 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;
      }
    };
  }

Fonte: fonte polyfill

thiagoh
fonte
1
você também pode usar o polyfill de core-js encontrada aqui: github.com/zloirock/core-js#stage-4-proposals
David Barreto
@DavidBarreto de fato! E para o React, uma resposta mais recente foi adicionada aqui .
CPHPython
36

Adicionando import 'core-js/es7/array';ao meu polyfill.tscorrigido o problema para mim.

JCisar
fonte
Isso foi publicado há muito tempo, mas talvez isso ajude alguém de alguma forma nas estruturas mais recentes, no entanto, acho que a resposta selecionada deve ser suficiente para qualquer coisa fora de casos de uso especiais.
Erik Grosskurth
1
import 'core-js / es / array'; a partir de 2020
timhc22 5/03
14

Eu tive um problema semelhante com um projeto Angular. No meu polyfills.ts eu tinha que adicionar os dois:

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

Além de ativar todos os outros padrões do IE 11. (Veja os comentários em polyfills.ts se estiver usando angular)

Depois de adicionar essas importações, o erro desapareceu e meus dados do Object foram preenchidos conforme pretendido.

bsheps
fonte
Isso funciona para mim. O que essas duas importações fazem afinal? E qual importação corrigiu o erro de inclusão? Ou ambos são para o erro de inclusão?
Iamjoshua 29/05/19
Como o IE11 não está mais recebendo atualizações de recursos da Microsoft, a implementação do javascript é datada e só oferece suporte a métodos no ES5. Ao importar esses 2 arquivos, você está adicionando os scripts de polyfill para Array e Object através do ES7, que inclui o método 'includes'.
bsheps
5

Como no Internet Explorer, o método javascript "includes" não suporta o que leva ao erro, conforme abaixo

dijit.form.FilteringSelect TypeError: O objeto não suporta a propriedade ou o método 'includes'

Então, eu mudei o método de string JavaScript de "includes" para "indexOf" como abaixo

//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");
}
satish Hiremath
fonte
3

Eu usei a includespartir do Lodashqual é realmente semelhante ao nativo.

Moacir Rosa
fonte
1

Estou usando o ReactJs e usado import 'core-js/es6/string';no início index.jspara resolver meu problema.

Também estou usando import 'react-app-polyfill/ie11';para dar suporte à execução do React no IE11.

react-app-polyfill

Este pacote inclui polyfills para vários navegadores. Ele inclui requisitos mínimos e recursos de idioma comumente usados ​​pelos projetos Create React App.

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

Bhushan Babar
fonte
1
Comecei a polyfilling manualmente todas as funções que falham no console do IE11 ... Realmente aprecio sua resposta de economia de tempo. Para adicionar esses 2 pacotes de uma vez para o seu package.json :npm i --save core-js react-app-polyfill
CPHPython
Aliás, core-js/es6parece não existir mais na v3, assim import 'core-js';como sugerido no Github .
precisa saber é o seguinte
0

Esta pergunta e suas respostas me levaram à minha própria solução (com a ajuda do SO), embora alguns digam que você não deve mexer com protótipos nativos:

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

Então eu apenas substituiu todos .includes()com .doesInclude()e meu problema foi resolvido.

TecBrat
fonte
2
.includes ()funciona em cadeias de caracteres e matrizes. Sua substring()solução funciona apenas com seqüências de caracteres e falha com matrizes. Conforme respondido por outras pessoas, usar em indexOf()vez de substring()é melhor porque isso funciona nos dois casos.
Meme Olsen