Код не работает в IE 11, отлично работает в Chrome

156

Следующий код можно запустить без проблем в Chrome, но выдает следующую ошибку в Internet Explorer 11.

Объект не поддерживает свойство или метод "opensWith"

Я храню идентификатор элемента в переменной. В чем проблема?

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>

Развернуть фрагмент

javascript html

— Бхушан Дхамдхере
источник

9

Скорее всего, вам придется использовать str.indexOf("REP") == 0вместо IE.

— Грант Томас

1

ES6 еще не является стандартом kangax.github.io/compat-table/es6 Существует ES6 Shim давал библиотеки , чтобы помочь переходную github.com/paulmillr/es6-shim Так же , как для ES5 ( в том числе не все shimmable)

— Xotic750

320

String.prototype.startsWith это стандартный метод в последней версии JavaScript, ES6.

Глядя на приведенную ниже таблицу совместимости, мы видим, что она поддерживается на всех современных основных платформах, кроме версий Internet Explorer.

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

Вам нужно реализовать .startsWithсебя. Вот такое заполнение :

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

— Ока
источник

3

В MDN Web

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

— Docs

1

Я склоняюсь к первой реализации как дано @Oka. В качестве дополнительного уточнения можно проверить, действительно ли «позиция» числовая: position =! IsNaN (parseInt (position))? положение: 0;

— ErnestV

36

text.indexOf("newString")это лучший метод вместо startsWith.

Пример:

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

— Йона
источник

Почему это лучший метод?

— TylerH

1

indexOf Метод не заменяет startWith, indexOf будет возвращать значение, если оно совпадает с любым в данной строке, я не предлагаю использовать indexOf.

— РаджКумар Самала

12

indexOf возвращает значение, но @Jona проверил, что возвращаемое значение равно нулю (т.е. строка находится в начале), то есть это замена хорошо startsWith!

— SharpC

Это та же функциональность, что и для полифилла, без добавления полифилла или добавления дополнительной библиотеки. Это отличное решение - единственный недостаток, который я вижу, - это, возможно, читаемость кода. Намерение становится более ясным, когда функция названа StartWith.

— Джон Т

13

Если это происходит в приложении Angular 2+, вы можете просто раскомментировать строку polyfills в polyfills.ts :

import 'core-js/es6/string';

— Виталий Улантиков
источник

Я добавил исправление полизаполнения Оки, но оно не работало для меня в моем приложении Angular 5, но import 'core-js/es6/string';исправило его. Большое спасибо!

— декабрь

5

Замените функцию startWith на:

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

Это будет поддерживать все браузеры, включая IE

Положение может быть установлено в 0 для сопоставления строк с начала, означающего 0-ю позицию.

— Harshit Pant
источник

Полезное решение без необходимости переписывать прототипы или использовать полифилы. Плюс это широко совместимо среди браузеров. +1

— Серхио А.

2

Как уже говорили другие, начало и конец и часть являются частью ES6 и недоступны в IE11. Наша компания всегда использует библиотеку lodash в качестве решения для заполнения в IE11. https://lodash.com/docs/4.17.4

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

— mbokil
источник

0

Хотя почта Оки работает отлично, она может быть немного устаревшей. Я понял, что lodash может справиться с этим с помощью одной функции. Если у вас установлен lodash, он может сэкономить вам несколько строк.

Просто попробуй:

import { startsWith } from lodash;

, , ,

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

— TheGabornator
источник

0

Я тоже недавно сталкивался с пробой. Я решил использовать ^, который похож на startwith в jquery. Сказать,

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

мы можем использовать

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

Здесь str - идентификатор элемента.

— Обучение пользователей
источник

0

Следуйте этому методу, если проблема возникает при работе с angular2 + проектами

Я искал решение, когда я получил эту ошибку, и это привело меня сюда. Но этот вопрос кажется конкретным, а ошибка нет, это общая ошибка. Это распространенная ошибка для разработчиков углов, имеющих дело с Internet Explorer.

У меня была такая же проблема при работе с angular 2+, и она была решена всего несколькими простыми шагами.

В последних версиях Angular присутствуют закомментированные коды в polyfills.ts, в котором показаны все полизаполнения, необходимые для бесперебойной работы в версиях Internet Explorer IE09, IE10 и 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';

Раскомментируйте коды, и они будут отлично работать в браузерах 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';

Но вы можете увидеть снижение производительности в браузерах IE по сравнению с другими :(

— Джитин Джон
источник