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

Posted 2023-02-22

【中文标题】使用 `window.location.hash.includes` 在 IE11 中抛出“对象不支持属性或方法 \'includes\'”

【英文标题】：Using `window.location.hash.includes` throws “Object doesn't support property or method 'includes'” in IE11使用 `window.location.hash.includes` 在 IE11 中抛出“对象不支持属性或方法 'includes'”

【发布时间】：2015-09-16 03:07:18

【问题描述】：

我正在检查 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'));
            ;
        );
);

【问题讨论】：

Internet Explorer 11 中window.location.hash 的值是多少？

【参考方案1】：

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

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

【讨论】：

好吧，现在我不能让它工作 if(window.location.hash.indexOf("?") >= 0) //do nothing else location.href = location.href+ '?';

我需要添加一个？如果 url 还没有，则到 url 的末尾

我知道这是一个老问题和答案，但 String.prototype.includes 似乎在 Windows 10 IE 11 上为我工作。

@troxwalt 很高兴听到这个消息，但它仍然无法在 Windows 7 IE11 上运行！

如果你是React，你可以使用polyfill packages，避免手动添加polyfills...

【参考方案2】：

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

【讨论】：

你也可以使用 core-js 中的 polyfill：github.com/zloirock/core-js#stage-4-proposals

@DavidBarreto 确实！对于React, a more recent answer was added here。

【参考方案3】：

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

【讨论】：

这是很久以前发布的，但也许这可能会以某种方式对使用较新框架的人有所帮助，但是我认为所选答案应该足以满足特殊用例之外的任何事情。

导入'core-js/es/array';截至 2020 年

【参考方案4】：

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

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

除了启用所有其他 IE 11 默认设置。 （如果使用 angular，请参阅 polyfills.ts 中的 cmets）

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

【讨论】：

这对我有用。无论如何，这两个进口做什么？什么导入修复了包含错误？或者它们都用于包含错误？

由于 IE11 不再接收 Microsoft 的功能更新，因此 javascript 实现已经过时并且仅支持通过 ES5 的方法。通过导入这 2 个文件，您将通过 ES7 添加 Array 和 Object 的 polyfill 脚本，其中包括 'includes' 方法。

【参考方案5】：

在 Internet Explorer 中，javascript 方法“includes”不支持导致如下错误

dijit.form.FilteringSelect TypeError：对象不支持属性或方法“包含”

所以我将 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");

【参考方案6】：

我使用了Lodash 中的includes，这与原生非常相似。

【参考方案7】：

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

我也在使用 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

【讨论】：

我开始手动填充所有在 IE11 控制台中失败的函数......非常感谢您节省时间的答案。一次将这两个包添加到您的 package.json：npm i --save core-js react-app-polyfill

顺便说一句，core-js/es6 在 v3 中似乎不再存在，所以只需 import 'core-js'; as suggested in Github。

【参考方案8】：

这个问题及其答案让我找到了自己的解决方案（在 SO 的帮助下），尽管有人说你不应该篡改原生原型：

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

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

【讨论】：

.includes () 适用于字符串和数组。您的 substring() 解决方案仅适用于字符串，不适用于数组。正如其他人所回答的那样，使用indexOf() 而不是substring() 更好，因为这在两种情况下都适用。