Javascript 代码不在 IE 11 中运行,在 Chrome 中运行良好

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/30867172/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-23 05:51:52  来源:igfitidea点击:

Code not running in IE 11, works fine in Chrome

javascripthtml

提问by Bhushan Dhamdhere

The following code can be run without a problem in Chrome, but throws the following error in Internet Explorer 11.

以下代码可以在 Chrome 中正常运行,但在 Internet Explorer 11 中会引发以下错误。

Object doesn't support property or method 'startsWith'

对象不支持属性或方法“startsWith”

I am storing the element's ID in a variable. What is the issue?

我将元素的 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>

回答by Oka

String.prototype.startsWithis a standard method in the most recent version of JavaScript, ES6.

String.prototype.startsWith是最新版本的 JavaScript ES6 中的标准方法。

Looking at the compatibility table below, we can see that it is supported on all current major platforms, exceptversions of Internet Explorer.

查看下面的兼容性表,我们可以看到它在当前所有主要平台上都受支持,Internet Explorer 版本除外

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

You'll need to implement .startsWithyourself. Here is the polyfill:

你需要.startsWith自己实现。这是polyfill

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

回答by Jona

text.indexOf("newString")is the best method instead of startsWith.

text.indexOf("newString")是最好的方法而不是startsWith.

Example:

例子:

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

回答by Vitaliy Ulantikov

If this is happening in Angular 2+ application, you can just uncommentstring polyfills in polyfills.ts:

如果这发生在 Angular 2+ 应用程序中,您可以在polyfills.ts 中取消注释字符串polyfill

import 'core-js/es6/string';

回答by Harshit Pant

Replace the startsWith function with:

将 startsWith 函数替换为:

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

This will support all browsers including IE

这将支持包括 IE 在内的所有浏览器

Position can be set to 0 for string matching from the start meaning 0th position.

位置可以设置为 0 从开始的字符串匹配,意思是第 0 个位置。

回答by mbokil

As others have said startsWith and endsWith are part of ES6 and not available in IE11. Our company always uses lodash library as a polyfill solution for IE11. https://lodash.com/docs/4.17.4

正如其他人所说,startsWith 和 endsWith 是 ES6 的一部分,在 IE11 中不可用。我们公司一直使用 lodash 库作为 IE11 的 polyfill 解决方案。https://lodash.com/docs/4.17.4

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

回答by TheGabornator

While the post of Oka is working great, it might be a bit outdated. I figured out that lodashcan tackle it with one single function. If you have lodash installed, it might save you a few lines.

虽然 Oka 的帖子效果很好,但它可能有点过时了。我发现lodash可以用一个函数来解决它。如果您安装了 lodash,它可能会为您节省几行代码。

Just try:

你试一试:

import { startsWith } from lodash;

. . .

. . .

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

回答by User Learning

I also recently faced the prob. I solved using ^ which is similar to startwith in jquery. Say,

我最近也遇到了这个问题。我使用类似于 startwith in 的 ^ 解决了 jquery。说,

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

we can use

我们可以用

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

Here, str is id of element.

这里,str 是元素的 id。

回答by jithin john

Follow this method if problem comes when working with angular2+ projects

如果在使用 angular2+ 项目时出现问题,请遵循此方法

I was looking for a solution when i got this error, and it got me here. But this question seems to be specific but the error is not, its a generic error. This is a common error for angular developers dealing with Internet Explorer.

当我遇到这个错误时,我正在寻找解决方案,它让我来到了这里。但是这个问题似乎很具体,但错误不是,它是一个通用错误。这是 Angular 开发人员处理 Internet Explorer 的常见错误。

I had the same issue while working with angular 2+, and it got resolved just by few simple steps.

我在使用 angular 2+ 时遇到了同样的问题,只需几个简单的步骤就可以解决。

In Angular latest versions, there are come commented codes in the polyfills.tsshows all the polyfills required for the smooth running in Internet Explorer versions IE09,IE10 and IE11

在角最新版本,也有在来注释代码polyfills.ts显示了所有所需的polyfills顺利在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';

Uncomment the codes and it would work perfectly in IE browsers

取消注释代码,它将在 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';

But you might see a performance drop in IE browsers compared to others :(

但是与其他浏览器相比,您可能会看到 IE 浏览器的性能下降:(