以下代码可以在Chrome中正常运行,但在Internet Explorer 11中会引发以下错误。
对象不支持属性或方法“ startsWith”
我将元素的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"> </td>
</tr>
<tr>
<td id="td1"> </td>
<td id="D1" onclick="changeClass('D1');">Doors</td>
</tr>
<tr>
<td id="td1"> </td>
<td id="D12" onclick="changeClass('D12');">Doors</td>
</tr>
</table>
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
自己。这是polyfill:
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中取消注释字符串polyfill:
import 'core-js/es6/string';
将startsWith函数替换为:
yourString.indexOf(searchString, position) // where position can be set to 0
这将支持所有浏览器,包括IE
可以从第0个位置的起始位置将位置设置为0以进行字符串匹配。
就像其他人所说的,startsWith和endsWith是ES6的一部分,在IE11中不可用。我们公司始终使用lodash库作为IE11的polyfill解决方案。https://lodash.com/docs/4.17.4
_.startsWith([string=''], [target], [position=0])
虽然Oka的职位运作良好,但可能有点过时了。我发现lodash可以用一个功能解决它。如果您安装了lodash,则可以节省几行。
试试看嘛:
import { startsWith } from lodash;
。。。
if (startsWith(yourVariable, 'REP')) {
return yourVariable;
return yourVariable;
}
}
我最近也遇到了问题。我解决了使用^的问题,它类似于中的startwith
jquery
。说,
var str = array[a].id;
if (str.startsWith('REP')) {..........}
我们可以用
if($("[id^=str]").length){..........}
在这里,str是元素的id。
如果在使用angular2 +项目时出现问题,请遵循此方法
遇到此错误时,我一直在寻找解决方案,而这却把我带到了这里。但是这个问题似乎是特定的,但错误不是,这是一个普遍的错误。对于使用Internet Explorer的开发人员来说,这是一个常见错误。
在使用angular 2+时,我遇到了同样的问题,只需几个简单的步骤即可解决。
在Angular最新版本中, polyfills.ts中包含注释代码。ts显示了在Internet Explorer版本IE09,IE10和IE11中顺利运行所需的所有polyfills。
/** 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浏览器与其他浏览器相比的性能下降:(
文章标签:html , javascript , startswith
版权声明:本文为原创文章,版权归 javascript 所有,欢迎分享本文,转载请保留出处!
评论已关闭!