使用 `window.location.hash.includes` 在 IE11 中抛出“对象不支持 属性 或方法 'includes'”
Using `window.location.hash.includes` throws “Object doesn't support property or method 'includes'” in IE11
我正在检查 URL 以查看它是否包含或包含 ?
以控制 window 中的散列弹出状态。所有其他浏览器都没有问题,只有 IE。
当我尝试以这种方式加载时,调试器给我这个错误:
Object doesn't support property or method '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')});
};
});
});
根据 MDN reference page,Internet Explorer 不支持 includes
。最简单的替代方法是使用 indexOf
,像这样:
if(window.location.hash.indexOf("?") >= 0) {
...
}
与在 Internet Explorer 中一样,javascript 方法 "includes" 不支持导致如下错误
dijit.form.FilteringSelect 类型错误:对象不支持 属性 或方法 'includes'
所以我将 JavaScript 字符串方法从 "includes" 更改为 "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.includes 那么为什么不使用官方的 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
,和原生的很像。
这个问题及其答案让我找到了自己的解决方案(在 SO 的帮助下),尽管有人说你不应该篡改原生原型:
// IE does not support .includes() so I'm making my own:
String.prototype.doesInclude=function(needle){
return this.substring(needle) != -1;
}
然后我把所有的.includes()
替换成.doesInclude()
,我的问题就解决了。
将 import 'core-js/es7/array';
添加到我的 polyfill.ts
解决了我的问题。
我在一个 Angular 项目中遇到了类似的问题。在我的 polyfills.ts 中,我必须同时添加:
import "core-js/es7/array";
import "core-js/es7/object";
除了启用所有其他 IE 11 默认值。 (如果使用 angular,请参阅 polyfills.ts 中的评论)
添加这些导入后错误消失,我的对象数据按预期填充。
我正在使用 ReactJs 并在 index.js
开始时使用 import 'core-js/es6/string';
来解决我的问题。
我也在使用 import 'react-app-polyfill/ie11';
来支持 运行 IE11 中的 React。
react-app-polyfill
This package includes polyfills for various
browsers. It includes minimum requirements and commonly used language
features used by Create React App projects.
https://github.com/facebook/create-react-app/blob/master/packages/react-app-polyfill/README.md
我正在检查 URL 以查看它是否包含或包含 ?
以控制 window 中的散列弹出状态。所有其他浏览器都没有问题,只有 IE。
当我尝试以这种方式加载时,调试器给我这个错误:
Object doesn't support property or method '
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')});
};
});
});
根据 MDN reference page,Internet Explorer 不支持 includes
。最简单的替代方法是使用 indexOf
,像这样:
if(window.location.hash.indexOf("?") >= 0) {
...
}
与在 Internet Explorer 中一样,javascript 方法 "includes" 不支持导致如下错误
dijit.form.FilteringSelect 类型错误:对象不支持 属性 或方法 'includes'
所以我将 JavaScript 字符串方法从 "includes" 更改为 "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.includes 那么为什么不使用官方的 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
,和原生的很像。
这个问题及其答案让我找到了自己的解决方案(在 SO 的帮助下),尽管有人说你不应该篡改原生原型:
// IE does not support .includes() so I'm making my own:
String.prototype.doesInclude=function(needle){
return this.substring(needle) != -1;
}
然后我把所有的.includes()
替换成.doesInclude()
,我的问题就解决了。
将 import 'core-js/es7/array';
添加到我的 polyfill.ts
解决了我的问题。
我在一个 Angular 项目中遇到了类似的问题。在我的 polyfills.ts 中,我必须同时添加:
import "core-js/es7/array";
import "core-js/es7/object";
除了启用所有其他 IE 11 默认值。 (如果使用 angular,请参阅 polyfills.ts 中的评论)
添加这些导入后错误消失,我的对象数据按预期填充。
我正在使用 ReactJs 并在 index.js
开始时使用 import 'core-js/es6/string';
来解决我的问题。
我也在使用 import 'react-app-polyfill/ie11';
来支持 运行 IE11 中的 React。
react-app-polyfill
This package includes polyfills for various browsers. It includes minimum requirements and commonly used language features used by Create React App projects.
https://github.com/facebook/create-react-app/blob/master/packages/react-app-polyfill/README.md