IE 11에서 실행되지 않는 코드, Chrome에서 정상 작동

IE 11에서 실행되지 않는 코드, Chrome에서 정상 작동

Chrome에서는 다음 코드를 문제없이 실행할 수 있지만 Internet Explorer 11에서는 다음 오류가 발생합니다.

개체가 속성 또는 메서드 시작을 지원하지 않습니다.'와 함께.

저는 요소의 ID를 변수에 저장하고 있습니다.무엇이 문제입니까?

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>

String.prototype.startsWith 는 자바스크립트의 가장 최근 버전인 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;
  };
}

text.indexOf("newString")대신에 가장 좋은 방법입니다.startsWith.

예:

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

Angular 2+ 응용 프로그램에서 이 문제가 발생하는 경우 polyfills.ts에서 문자열 폴리필의 주석을 해제할 수 있습니다.

import 'core-js/es6/string';

시작을 바꿉니다.기능 포함:

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

IE를 포함한 모든 브라우저를 지원합니다.

시작 의미 0번 위치부터 문자열 매칭 시 위치를 0으로 설정할 수 있습니다.

다른 사람들이 말한 것처럼 시작.With 및 ends With는 ES6의 일부이며 IE11에서는 사용할 수 없습니다.우리 회사는 IE11의 폴리필 솔루션으로 항상 lodash library를 사용합니다.https://lodash.com/docs/4.17.4

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

오카 게시물은 잘 작동하고 있지만, 좀 구식일 수도 있습니다.저는 로다쉬가 하나의 기능으로 그것을 해결할 수 있다는 것을 알았습니다.Lodash를 설치하면 몇 줄을 절약할 수 있습니다.

시도해 보십시오.

import { startsWith } from lodash;

. . .

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

저도 최근에 그 문제에 직면했습니다.처음과 비슷한 ^을 사용해서 풀었습니다.jquery.말합니다,

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

사용할수 있습니다

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

여기, 요소의 스트라이드.

angular2+ 프로젝트 작업 시 문제가 발생할 경우 이 방법을 따릅니다.

제가 해결책을 찾던 중에 이 오류가 발생했고, 그것이 저를 여기에 있게 했습니다.하지만 이 질문은 구체적인 것 같지만 오류는 일반적인 오류가 아닙니다.이는 Internet Explorer(인터넷 익스플로러)를 다루는 각도형 개발자들에게 일반적인 오류입니다.

angular 2+로 작업하는 동안 같은 문제가 있었는데, 몇 가지 간단한 절차만으로 해결되었습니다.

Angular 최신 버전에서는 polyfills.ts에 Internet Explorer 버전 IE09에서 원활한 실행을 위해 필요한 모든 polyfills를 표시하는 주석 코드가 있습니다.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 브라우저의 성능이 다른 브라우저에 비해 떨어지는 것을 볼 수 있습니다. :(

언급URL : https://stackoverflow.com/questions/30867172/code-not-running-in-ie-11-works-fine-in-chrome