Question

这里是我的代码块。它在fireFox和Chrome中非常完美。但不是在IE中。我收到错误＆＃34; Object doesn't support property or method 'includes'＆＃34;

function rightTreeSwapfunc2() {
    if ($(".right-tree").css("background-image").includes("stage1") == true) {
        $(".right-tree").css({
            backgroundImage: "url(/plant-breeding/img/scenes/plant-breeding/stage5.jpg)"
        })
    } else {
        $(".right-tree").css({
            backgroundImage: "url(/plant-breeding/img/scenes/plant-breeding/stage3.jpg)"
        })
    }
}

我可以稍微修改它并使用vanilla JS并执行：

document.getElementById("right-tree").classList.contains

但是在更改JS和编辑HTML和CSS之前，我宁愿看看是否有办法让它在IE中运行。

Answer 1

如果查看includes()的文档，大多数浏览器都不支持此属性。

使用indexOf()将属性转换为字符串后，您可以使用广泛支持的toString()：

if ($(".right-tree").css("background-image").indexOf("stage1") > -1) {
//                                           ^^^^^^^^^^^^^^^^^^^^^^

您还可以使用MDN中的polyfill。

if (!String.prototype.includes) {
    String.prototype.includes = function() {
        'use strict';
        return String.prototype.indexOf.apply(this, arguments) !== -1;
    };
}

Answer 2

IE11确实实现了String.prototype.includes，为什么不使用官方的Polyfill？

来源：polyfill source

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

Answer 3

这是解决方案（ref：https://www.cluemediator.com/object-doesnt-support-property-or-method-includes-in-ie）

if (!Array.prototype.includes) {
  Object.defineProperty(Array.prototype, 'includes', {
    value: function (searchElement, fromIndex) {

      if (this == null) {
        throw new TypeError('"this" is null or not defined');
      }

      // 1. Let O be ? ToObject(this value).
      var o = Object(this);

      // 2. Let len be ? ToLength(? Get(O, "length")).
      var len = o.length >>> 0;

      // 3. If len is 0, return false.
      if (len === 0) {
        return false;
      }

      // 4. Let n be ? ToInteger(fromIndex).
      //    (If fromIndex is undefined, this step produces the value 0.)
      var n = fromIndex | 0;

      // 5. If n ≥ 0, then
      //  a. Let k be n.
      // 6. Else n < 0,
      //  a. Let k be len + n.
      //  b. If k < 0, let k be 0.
      var k = Math.max(n >= 0 ? n : len - Math.abs(n), 0);

      function sameValueZero(x, y) {
        return x === y || (typeof x === 'number' && typeof y === 'number' && isNaN(x) && isNaN(y));
      }

      // 7. Repeat, while k < len
      while (k < len) {
        // a. Let elementK be the result of ? Get(O, ! ToString(k)).
        // b. If SameValueZero(searchElement, elementK) is true, return true.
        if (sameValueZero(o[k], searchElement)) {
          return true;
        }
        // c. Increase k by 1. 
        k++;
      }

      // 8. Return false
      return false;
    }
  });
}

Answer 4

就我而言，我发现最好使用“ string.search”。

var str = "Some very very very long string";
var n = str.search("very");

以防对某人有帮助。

Answer 5

import 'core-js/es7/array'

进入polyfill.ts对我有用。

Answer 6

另一个解决方案是使用包含返回true或false

的包含

_。contains（$（“。right-tree”）。css（“background-image”），“stage1”）

希望这有帮助

包括（）不适用于所有浏览器

6 个答案: