Il codice non funziona in IE 11, funziona bene in Chrome

156

Il seguente codice può essere eseguito senza problemi in Chrome, ma genera il seguente errore in Internet Explorer 11.

L'oggetto non supporta la proprietà o il metodo "startWith"

Sto memorizzando l'ID dell'elemento in una variabile. Qual'è il problema?

function changeClass(elId) {
  var array = document.getElementsByTagName('td');
  
  for (var a = 0; a < array.length; a++) {
    var str = array[a].id;
    
    if (str.startsWith('REP')) {
      if (str == elId) {
        array[a].style.backgroundColor = "Blue";
        array[a].style.color = "white";
      } else {
        array[a].style.backgroundColor = "";
        array[a].style.color = "";
      }
    } else if (str.startsWith('D')) {
      if (str == elId) {
        array[a].style.backgroundColor = "Blue";
        array[a].style.color = "white";
      } else {
        array[a].style.backgroundColor = "";
        array[a].style.color = "";
      }
    }
  }
}

<table>
  <tr>
    <td id="REP1" onclick="changeClass('REP1');">REPS</td>
    <td id="td1">&nbsp;</td>
  </tr>
  <tr>
    <td id="td1">&nbsp;</td>
    <td id="D1" onclick="changeClass('D1');">Doors</td>
  </tr>
  <tr>
    <td id="td1">&nbsp;</td>
    <td id="D12" onclick="changeClass('D12');">Doors</td>
  </tr>
</table>

Espandi frammento

javascript html

— Bhushan Dhamdhere
fonte

9

Probabilmente dovrai str.indexOf("REP") == 0invece utilizzare IE.

— Concedi Thomas il

1

ES6 non è ancora uno standard kangax.github.io/compat-table/es6 Esiste una libreria di shim ES6 per aiutare la transizione github.com/paulmillr/es6-shim Proprio come per ES5 (incluso non tutto è shimmable)

— Xotic750

320

String.prototype.startsWith è un metodo standard nella versione più recente di JavaScript, ES6.

Guardando la tabella di compatibilità di seguito, possiamo vedere che è supportato su tutte le principali piattaforme attuali, ad eccezione delle versioni di Internet Explorer.

╔═══════════════╦════════╦═════════╦═══════╦═══════════════════╦═══════╦════════╗
║    Feature    ║ Chrome ║ Firefox ║ Edge  ║ Internet Explorer ║ Opera ║ Safari ║
╠═══════════════╬════════╬═════════╬═══════╬═══════════════════╬═══════╬════════╣
║ Basic Support ║    41+ ║     17+ ║ (Yes) ║ No Support        ║    28 ║      9 ║
╚═══════════════╩════════╩═════════╩═══════╩═══════════════════╩═══════╩════════╝

Dovrai implementare .startsWithte stesso. Ecco il polyfill :

if (!String.prototype.startsWith) {
  String.prototype.startsWith = function(searchString, position) {
    position = position || 0;
    return this.indexOf(searchString, position) === position;
  };
}

— Oka
fonte

3

c'è un'altra implementazione nei documenti web di MDN

String.prototype.startsWith = function(search, pos) {          return this.substr(!pos || pos < 0 ? 0 : +pos, search.length) === search;     };

— oCcSking

1

Tendo alla prima implementazione data da @Oka. Proprio come un ulteriore perfezionamento si potrebbe verificare che "position" sia veramente numerica: position =! IsNaN (parseInt (position))? posizione: 0;

— ErnestV,

36

text.indexOf("newString")è il metodo migliore anziché startsWith.

Esempio:

var text = "Format";
if(text.indexOf("Format") == 0) {
    alert(text + " = Format");
} else {
    alert(text + " != Format");
}

— Jona
fonte

Perché è il metodo migliore?

— TylerH,

1

Metodo indexOf in sostituzione di per startWith, indexOf restituirà valore se corrisponde a un punto qualsiasi in una determinata stringa, non suggerisco di utilizzare indexOf.

— RajKumar Samala,

12

indexOfrestituisce valore, ma @Jona ha verificato che il valore restituito sia zero (ovvero la stringa è all'inizio), il che significa che è un buon sostituto per startsWith!

— SharpC

Questa è la stessa funzionalità del polyfill senza dover aggiungere un polyfill o aggiungere una libreria aggiuntiva. È una soluzione eccellente - l'unico aspetto negativo che posso vedere è forse la leggibilità del codice - l'intenzione è più chiara quando la funzione è denominata avvii.

— John T

13

Se ciò accade nell'applicazione Angular 2+, puoi semplicemente decommentare i polyfill di stringa in polyfills.ts :

import 'core-js/es6/string';

— Vitaliy Ulantikov
fonte

Ho aggiunto la correzione polyfill di Oka, ma non ha funzionato per me sulla mia applicazione Angular 5, ma l' import 'core-js/es6/string';ho risolta. Grazie molto!

— decebale

5

Sostituisci la funzione startWith con:

yourString.indexOf(searchString, position) // where position can be set to 0

Questo supporterà tutti i browser incluso IE

La posizione può essere impostata su 0 per la corrispondenza della stringa dall'inizio, ovvero la posizione 0.

— Harshit Pant
fonte

Soluzione utile senza dover riscrivere prototipi né usare polifilloli. Inoltre è ampiamente compatibile tra i browser. +1

— Sergio A.

2

Come altri hanno già detto inizia con e finisce con parte di ES6 e non disponibile in IE11. La nostra azienda utilizza sempre la libreria lodash come soluzione polyfill per IE11. https://lodash.com/docs/4.17.4

_.startsWith([string=''], [target], [position=0])

— mbokil
fonte

0

Mentre il post di Oka funziona alla grande, potrebbe essere un po 'obsoleto. Ho capito che Lodash può affrontarlo con una sola funzione. Se hai installato lodash, potrebbe salvarti alcune righe.

Prova:

import { startsWith } from lodash;

. . .

    if (startsWith(yourVariable, 'REP')) {
         return yourVariable;        
    return yourVariable;
       }      
     }

— TheGabornator
fonte

0

Di recente ho anche affrontato il problema. Ho risolto usando ^ che è simile a startwith in jquery. Dire,

var str = array[a].id;
if (str.startsWith('REP')) {..........}

possiamo usare

if($("[id^=str]").length){..........}

Qui, str è id dell'elemento.

— Apprendimento dell'utente
fonte

0

Seguire questo metodo se il problema si presenta quando si lavora con progetti angular2 +

Stavo cercando una soluzione quando ho riscontrato questo errore e mi ha portato qui. Ma questa domanda sembra essere specifica ma l'errore non lo è, è un errore generico. Questo è un errore comune per gli sviluppatori angolari che si occupano di Internet Explorer.

Ho avuto lo stesso problema mentre lavoravo con angular 2+, e si è risolto solo con pochi semplici passaggi.

Nelle ultime versioni angolari, ci sono codici commentati nei polyfills.ts mostra tutti i polyfill richiesti per il buon funzionamento nelle versioni di Internet Explorer IE09, IE10 e IE11

/** IE9, IE10 and IE11 requires all of the following polyfills. **/
//import 'core-js/es6/symbol';
//import 'core-js/es6/object';
//import 'core-js/es6/function';
//import 'core-js/es6/parse-int';
//import 'core-js/es6/parse-float';
//import 'core-js/es6/number';
//import 'core-js/es6/math';
//import 'core-js/es6/string';
//import 'core-js/es6/date';
//import 'core-js/es6/array';
//import 'core-js/es6/regexp';
//import 'core-js/es6/map';
//import 'core-js/es6/weak-map';
//import 'core-js/es6/set';

Decommenta i codici e funzionerebbe perfettamente nei browser IE

/** IE9, IE10 and IE11 requires all of the following polyfills. **/
import 'core-js/es6/symbol';
import 'core-js/es6/object';
import 'core-js/es6/function';
import 'core-js/es6/parse-int';
import 'core-js/es6/parse-float';
import 'core-js/es6/number';
import 'core-js/es6/math';
import 'core-js/es6/string';
import 'core-js/es6/date';
import 'core-js/es6/array';
import 'core-js/es6/regexp';
import 'core-js/es6/map';
import 'core-js/es6/weak-map';
import 'core-js/es6/set';

Ma potresti notare un calo delle prestazioni nei browser IE rispetto ad altri :(

— jithin john
fonte