使用`window.location.hash.includes`抛出“对象不支持属性或方法'包括'”在IE11中

时间:2015-06-29 15:12:39

标签: javascript internet-explorer-11 ecmascript-7

我正在检查URL以查看它是否包含或包含?来控制窗口中的哈希弹出状态。所有其他浏览器都没有问题,只有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')});
            };
        });
});

8 个答案:

答案 0 :(得分:221)

根据MDN reference page,Internet Explorer不支持includes。最简单的替代方法是使用indexOf,如下所示:

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

答案 1 :(得分:53)

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;
      }
    };
  }

来源:polyfill source

答案 2 :(得分:28)

在我的import 'core-js/es7/array';中添加polyfill.ts可以解决此问题。

答案 3 :(得分:8)

我在Angular项目中遇到了类似的问题。在我的polyfills.ts中,我必须同时添加:

body,
html {
  height: 100%;
}

* {
  box-sizing: border-box;
}

.bg-image {
  /* The image used */
  background-image: url("images/wallpaper1.jpg");
  /* Add the blur effect */
  filter: blur(8px);
  -webkit-filter: blur(8px);
  /* Full height */
  height: 100%;
  /* Center and scale the image nicely */
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}


/* Position text in the middle of the page/image */

.bg-text {
  background-color: rgb(0, 0, 0);
  /* Fallback color */
  background-color: rgba(0, 0, 0, 0.4);
  /* Black w/opacity/see-through */
  color: white;
  font-weight: bold;
  border: 3px solid #f1f1f1;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  width: 80%;
  padding: 20px;
  text-align: center;
}

.bg-image2 {
  /* The image used */
  background-image: url("images/wallpaper2.jpg");
  /* Add the blur effect */
  filter: blur(8px);
  -webkit-filter: blur(8px);
  /* Full height */
  height: 100%;
  /* Center and scale the image nicely */
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.profilePicture {
  position: absolute;
  left: 50%;
  margin: 200px auto;
  transform: translate(-50%, -50%);
}

除了启用所有其他IE 11默认设置。 (如果使用角形,请参见polyfills.ts中的注释)

添加这些导入后,错误消失了,并且按预期填充了我的对象数据。

答案 4 :(得分:5)

在Internet Explorer中,javascript方法“includes”不支持哪个导致错误,如下所示

dijit.form.FilteringSelect TypeError:Object不支持属性或方法'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");
}

答案 5 :(得分:3)

我使用了来自Lodash的{​​{3}},它与本地人非常相似。

答案 6 :(得分:1)

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

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

  

react-app-polyfill

     

此包装包括用于各种包装的填充料   浏览器。它包括最低要求和常用语言   Create React App项目使用的功能。

https://github.com/facebook/create-react-app/blob/master/packages/react-app-polyfill/README.md

答案 7 :(得分:0)

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

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

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