Korzystanie z „window.location.hash.includes” rzuca „Obiekt nie obsługuje właściwości lub metody„ obejmuje ”” w IE11

173

Sprawdzam adres URL, aby zobaczyć, czy zawiera lub zawiera ?w nim znak , aby kontrolować stan skrótu w oknie. Wszystkie inne przeglądarki nie mają problemu, tylko IE.

Debugger wyświetla ten błąd, gdy próbuję załadować w ten sposób:

Obiekt nie obsługuje właściwości ani metody ' includes'

Nie pojawia się żaden błąd, kiedy ładuję stronę przez 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
źródło
Jaka jest wartość programu window.location.hashInternet Explorer 11?
nils

Odpowiedzi:

242

Według strony referencyjnej MDN , includesnie jest obsługiwane w przeglądarce Internet Explorer. Najprostszą alternatywą jest użycie indexOf:

if(window.location.hash.indexOf("?") >= 0) {
    ...
}
GOTO 0
źródło
1
OK, cóż, teraz nie mogę tego uruchomić, jeśli (window.location.hash.indexOf ("?")> = 0) {// nic nie rób} else {location.href = location.href + '?'; }
Erik Grosskurth
Muszę dodać? do końca
adresu
1
Wiem, że to stare pytanie i odpowiedź, ale wydaje się, że String.prototype.includes działa dla mnie na Windows 10 IE 11.
troxwalt
2
@troxwalt Dobrze to słyszeć, ale nadal nie działa w systemie Windows 7 IE11!
nevada_scout
Jeśli React ing, można użyć PolyFill pakiety i uniknąć ręcznie dodając polyfills ...
CPHPython
58

IE11 implementuje String.prototype.includes, więc dlaczego nie skorzystać z oficjalnego narzędzia 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;
      }
    };
  }

Źródło: źródło polyfill

thiagoh
źródło
1
możesz również użyć polyfill z core-js, który znajdziesz tutaj: github.com/zloirock/core-js#stage-4-propiments
David Barreto
@DavidBarreto rzeczywiście! W przypadku Reacta dodano tutaj nowszą odpowiedź .
CPHPython
36

Dodanie import 'core-js/es7/array';do mojego polyfill.tsrozwiązało problem dla mnie.

JCisar
źródło
Zostało to opublikowane dawno temu, ale może w jakiś sposób może to pomóc komuś w nowszych frameworkach, ale myślę, że wybrana odpowiedź powinna wystarczyć na wszystko poza specjalnymi przypadkami użycia.
Erik Grosskurth
1
import 'core-js / es / array'; od 2020
timhc22
14

Miałem podobny problem z projektem Angular. W moich polyfills.ts musiałem dodać oba:

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

Oprócz włączenia wszystkich pozostałych ustawień domyślnych IE 11. (Zobacz komentarze w polyfills.ts, jeśli używasz kątowych)

Po dodaniu tych importów błąd zniknął, a moje dane Object zostały wypełnione zgodnie z zamierzeniami.

bsheps
źródło
To działa dla mnie. Co właściwie robią te dwa importy? A jaki import naprawił błąd zawiera? Czy oba są dla błędu include?
iamjoshua
Ponieważ IE11 nie otrzymuje już aktualizacji funkcji od Microsoft, implementacja javascript jest przestarzała i obsługuje tylko metody przez ES5. Importując te 2 pliki, dodajesz skrypty polyfill dla Array i Object przez ES7, które zawierają metodę „include”.
bsheps
5

Podobnie jak w przeglądarce Internet Explorer, metoda javascript „obejmuje” nie obsługuje, co prowadzi do błędu, jak poniżej

dijit.form.FilteringSelect TypeError: Obiekt nie obsługuje właściwości lub metody „zawiera”

Więc zmieniłem metodę ciągu JavaScript z „obejmuje” na „indexOf”, jak poniżej

//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 najemnik
źródło
3

Skorzystałem includesz Lodashktórego jest bardzo podobny do rodzimego.

Moacir Rosa
źródło
1

Używam ReactJs i używam go import 'core-js/es6/string';na początku index.jsdo rozwiązania mojego problemu.

Używam również import 'react-app-polyfill/ie11';do obsługi uruchamiania React w IE11.

react-app-polyfill

Ten pakiet zawiera wypełniacze dla różnych przeglądarek. Zawiera minimalne wymagania i powszechnie używane funkcje językowe używane w projektach aplikacji Create React.

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

Bhushan Babar
źródło
1
Zacząłem ręcznie wypełniać wszystkie funkcje, które zawodzą w konsoli IE11 ... Naprawdę doceniam twoją oszczędność czasu. Aby dodać te 2 pakiety jednocześnie do pliku package.json :npm i --save core-js react-app-polyfill
CPHPython
Przy okazji, core-js/es6wydaje się , że nie istnieje już w wersji 3, więc tak import 'core-js';jak sugerowano w Github .
CPHPython
0

To pytanie i odpowiedzi na nie doprowadziły mnie do własnego rozwiązania (z pomocą SO), chociaż niektórzy twierdzą, że nie powinieneś majstrować przy natywnych prototypach:

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

Potem po prostu wymienić wszystkie .includes()z .doesInclude()i mój problem został rozwiązany.

TecBrat
źródło
2
.includes ()działa zarówno na łańcuchach, jak i na tablicach. Twoje substring()rozwiązanie działa tylko w przypadku ciągów i kończy się niepowodzeniem w przypadku tablic. Jak odpowiedziały inne osoby, używanie indexOf()zamiast substring()jest lepsze, ponieważ działa to w obu przypadkach.
Memet Olsen