在 IE11中使用‘ window.location.hash.include’抛出“ Object doesn’t support property or method‘ include’”

我正在检查 URL,看看它是否包含或包含 ?,以控制窗口中的 hash pop 状态。所有其他浏览器都没有问题,只有 IE 有问题。

当我尝试以这种方式加载时,调试器会给我这个错误:

对象不支持属性或方法‘ includes

当我通过 popstate 加载页面时,不会得到任何错误。

    $(document).ready(function(e) {
if(window.location.hash) {
var hash;
if(window.location.hash.includes("?")) {
alert('I have a ?');
hash = window.location.hash.substring(window.location.hash.indexOf('#') + 0,window.location.hash.indexOf('?'));
}else {
hash = window.location.hash;
};
if (hash=="#DRS" || hash=="#DRP" || hash=="#DFFI" || hash=="#DCI" || hash=="#DCP" || hash=="#DRP" || hash=="#DRMA" || hash=="#EICS" || hash=="#ORG"){
$(hash+'Content').addClass('pageOn').removeClass('pageOff');
}else {
$('#homeContent').addClass('pageOn').removeClass('pageOff');
};
} else {
$('#homeContent').addClass('pageOn').removeClass('pageOff');
}
$(window).on('popstate', function() {
var hash;
if(window.location.hash.includes("?")) {
hash = window.location.hash.substring(window.location.hash.indexOf('#') + 0,window.location.hash.indexOf('?'));
}else {
hash = window.location.hash;
};
if (hash=="#DRS" || hash=="#DRP" || hash=="#DFFI" || hash=="#DCI" || hash=="#DCP" || hash=="#DRP" || hash=="#DRMA" || hash=="#EICS" || hash=="#ORG"){
$(this).navigate({target: $(hash+'Content')});
if(window.location.hash.includes("?")) {
}else{
location.href = location.href+'?';
}
}else {
$(this).navigate({target: $('#homeContent')});
};
});
});
142910 次浏览

根据 MDN 参考页面,Internet Explorer 不支援 includes,最简单的方法是使用 indexOf,如下:

if(window.location.hash.indexOf("?") >= 0) {
...
}

和 Internet Explorer 一样,javascript 方法“ include”不支持导致以下错误的方法

FilteringSelect TypeError: 对象不支持“ include”属性或方法

因此,我将 JavaScript 字符串方法从“ include”更改为“ indexOf”,如下所示

//str1 doesn't match str2 w.r.t index, so it will try to add object
var str1="acd", str2="b";
if(str1.indexOf(str2) == -1)
{
alert("add object");
}
else
{
alert("object not added");
}

IE11确实实现了 String.Prototype.include,那么为什么不使用官方的 Polyfill 呢?

  if (!String.prototype.includes) {
String.prototype.includes = function(search, start) {
if (typeof start !== 'number') {
start = 0;
}


if (start + search.length > this.length) {
return false;
} else {
return this.indexOf(search, start) !== -1;
}
};
}

资料来源: 聚合物填料源

我已经使用了 Lodash中的 includes,它与原生 Lodash非常相似。

这个问题及其答案引导我找到了自己的解决方案(在 SO 的帮助下) ,尽管有人说不应该篡改本地原型:

  // IE does not support .includes() so I'm making my own:
String.prototype.doesInclude=function(needle){
return this.substring(needle) != -1;
}

然后我用 .doesInclude()代替了所有的 .includes(),我的问题就解决了。

import 'core-js/es7/array';添加到我的 polyfill.ts为我解决了这个问题。

我在 Angular 项目中也遇到过类似的问题,在我的文章中,我不得不同时添加以下两点:

    import "core-js/es7/array";
import "core-js/es7/object";

除了启用所有其他 IE 11默认值之外

在添加了这些导入之后,错误消失了,我的 Object 数据按预期填充完毕。

我正在使用 ReactJ,并在 index.js的开始使用 import 'core-js/es6/string';来解决我的问题。

我还使用 import 'react-app-polyfill/ie11';来支持在 IE11中运行 React。

反应-应用-填充物

此包包括各种填充物 它包括最低要求和常用语言 创建反应应用程序项目所使用的特性。

Https://github.com/facebook/create-react-app/blob/master/packages/react-app-polyfill/readme.md