Die Verwendung von "window.location.hash.includes" löst in IE11 "Objekt unterstützt keine Eigenschaft oder Methode" Includes "" aus

173

Ich überprüfe die URL, um festzustellen, ob sie eine enthält oder enthält ?, um den Hash-Pop-Status im Fenster zu steuern. Alle anderen Browser haben kein Problem, nur der IE.

Der Debugger gibt mir diesen Fehler, wenn ich versuche, auf diese Weise zu laden:

Objekt unterstützt keine Eigenschaft oder Methode ' includes'

Ich erhalte keine Fehlermeldung, wenn ich die Seite über den Popstate lade.

    $(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
quelle
Was ist der Wert von window.location.hashInternet Explorer 11?
Null

Antworten:

242

Gemäß der MDN Referenzseite , includesauf Internet Explorer wird nicht unterstützt. Die einfachste Alternative ist folgende indexOf:

if(window.location.hash.indexOf("?") >= 0) {
    ...
}
GOTO 0
quelle
1
OK, jetzt kann ich das nicht zum Laufen bringen, wenn (window.location.hash.indexOf ("?")> = 0) {// nichts tun} else {location.href = location.href + '?'; }
Erik
Ich muss ein hinzufügen? bis zum Ende der URL, wenn die URL noch keine hat
Erik
1
Ich weiß, dass dies eine alte Frage und Antwort ist, aber String.prototype.includes scheint für mich unter Windows 10 IE 11 zu funktionieren.
troxwalt
2
@troxwalt Das ist gut zu hören, aber es funktioniert immer noch nicht unter Windows 7 IE11!
nevada_scout
Wenn Sie reagieren , können Sie Polyfill-Pakete verwenden und das manuelle Hinzufügen von Polyfills vermeiden ...
CPHPython
58

IE11 implementiert String.prototype.includes. Warum also nicht die offizielle Polyfill verwenden?

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

Quelle: Polyfill-Quelle

Thiagoh
quelle
1
Sie können auch die Polyfill von Core-Js verwenden, die hier zu finden ist: github.com/zloirock/core-js#stage-4-proposals
David Barreto
@ DavidBarreto in der Tat! Und für React wurde hier eine neuere Antwort hinzugefügt .
CPHPython
36

Durch Hinzufügen import 'core-js/es7/array';zu meinem wurde polyfill.tsdas Problem für mich behoben.

JCisar
quelle
Dies wurde vor langer Zeit gepostet, aber vielleicht kann dies jemandem auf den neueren Frameworks irgendwie helfen, aber ich denke, die ausgewählte Antwort sollte für alles außerhalb spezieller Anwendungsfälle ausreichen.
Erik Grosskurth
1
'core-js / es / array' importieren; Stand 2020
22.
14

Ich hatte ein ähnliches Problem mit einem Angular-Projekt. In meiner polyfills.ts musste ich beides hinzufügen:

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

Zusätzlich zum Aktivieren aller anderen IE 11-Standardeinstellungen. (Siehe Kommentare in polyfills.ts, wenn Winkel verwendet wird.)

Nach dem Hinzufügen dieser Importe verschwand der Fehler und meine Objektdaten wurden wie beabsichtigt ausgefüllt.

bsheps
quelle
Das funktioniert bei mir. Was machen diese beiden Importe überhaupt? Und welcher Import hat den Includes-Fehler behoben? Oder sind beide für den Includes-Fehler?
Iamjoshua
Da IE11 keine Feature-Updates mehr von Microsoft erhält, ist die Javascript-Implementierung veraltet und unterstützt nur Methoden über ES5. Durch den Import dieser beiden Dateien fügen Sie die Polyfill-Skripte für Array und Object über ES7 hinzu, die die Methode 'include' enthalten.
bsheps
5

Wie in Internet Explorer wird die Javascript-Methode "Includes" nicht unterstützt, was zu dem folgenden Fehler führt

dijit.form.FilteringSelect TypeError: Objekt unterstützt keine Eigenschaft oder Methode 'include'

Daher habe ich die JavaScript-Zeichenfolgenmethode wie folgt von "Includes" in "IndexOf" geändert

//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
quelle
3

Ich habe verwendet, includesvon Lodashdenen ist wirklich ähnlich wie die native.

Moacir Rosa
quelle
1

Ich benutze ReactJs und habe es import 'core-js/es6/string';zu Beginn verwendet index.js, um mein Problem zu lösen.

Ich verwende auch import 'react-app-polyfill/ie11';, um das Ausführen von React in IE11 zu unterstützen.

React-App-Polyfill

Dieses Paket enthält Polyfills für verschiedene Browser. Es enthält Mindestanforderungen und häufig verwendete Sprachfunktionen, die von Create React App-Projekten verwendet werden.

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

Bhushan Babar
quelle
1
Ich habe damit begonnen, alle Funktionen, die in der IE11-Konsole fehlschlagen, manuell zu füllen ... Ich schätze Ihre zeitsparende Antwort sehr. So fügen Sie diese 2 Pakete gleichzeitig zu Ihrem package.json hinzu :npm i --save core-js react-app-polyfill
CPHPython
Übrigens core-js/es6scheint es in v3 nicht mehr zu existieren, so import 'core-js';wie es in Github vorgeschlagen wurde .
CPHPython
0

Diese Frage und ihre Antworten führten mich zu meiner eigenen Lösung (mit Hilfe von SO), obwohl einige sagen, Sie sollten native Prototypen nicht manipulieren:

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

Dann habe ich einfach alles .includes()durch ersetzt .doesInclude()und mein Problem wurde gelöst.

TecBrat
quelle
2
.includes ()funktioniert sowohl mit Strings als auch mit Arrays. Ihre substring()Lösung funktioniert nur mit Zeichenfolgen und schlägt mit Arrays fehl. Wie von anderen Personen beantwortet, ist die Verwendung von indexOf()anstelle von substring()besser, da dies in beiden Fällen funktioniert.
Memet Olsen