Javascript / css 在 Internet Explorer 中不起作用答案

【问题标题】：Javascript / css not working in Internet ExplorerJavascript / css 在 Internet Explorer 中不起作用
【发布时间】：2020-10-21 11:37:10
【问题描述】：

我正在通过浏览器测试站点（例如 Lambda 测试）在 Internet Explorer 上测试我的站点 - 但它根本不起作用。什么都没有发生，没有动静。这是怎么回事，我该如何解决？我已经在 IE 11 和 IE 9 上测试过了。

来自这篇文章：How to enable JavaScript in Windows

看起来有时您必须手动启用 javascript，我假设像 lambda test 这样的网站已经启用了此功能。我用的是 Mac，所以我不能真正使用 IE。

更新 - CSS：

 img
{
  display:none;
  height: 400px;
}


 img.invisible
{
  visibility: hidden;
}

img.show
{
  display:inline;
}

img.anim1
{
  animation-duration: 2000ms;
}

 img.anim2
{
  animation-duration: 2000ms;
}

img.anim3
{
  animation-duration: 2000ms;
}


.fadeIn
{
  animation-name: fadeIn;
}

@keyframes fadeIn 
{
 0% {opacity: 0;}
 100% {opacity: 1;}
}


@-ms-keyframes fadeIn 
{
 0% {opacity: 0;}
 100% {opacity: 1;}
}

.fadeOut
{
  animation-name: fadeOut;
}

@-ms-keyframes fadeOut 
{
 0% {opacity: 1;}
 100% {opacity: 0; display:none;}
}

    
    <section class="conA">
    <div id="container">
      <div id="heroText">
         <p>Lorem ipsum</p>
        <div id="text"></div>
      </div>
      <div id="images"></div>
    </div>
    </section>
    
    
    
    <script type="text/javascript">
    
    var _CONTENT = [ "lorem ipsum", "example sentence"
    , "example 2", "example 3" ];
    
    
    var IMAGE_URLS = ['img/image2.png', 'img/image1.png', 'img/image3.png', 'img/image1.png','img/image2.png','img/image3.png', 'img/image4.png','img/image5.png','img/image6.png','https://www.gravatar.com/avatar/a235706e3d81b614acaec3368edfea4b?s=96&d=identicon&r=PG','https://i.stack.imgur.com/qxeUf.jpg?s=96&g=1','https://i.stack.imgur.com/4xczZ.jpg?s=96&g=1'];
    
    var IMAGES = IMAGE_URLS.map((url, index) =>
    {
      var img = document.createElement('img');
      img.setAttribute('src', url);
      img.classList.add('anim'+((index%3)+1));
      img.classList.add('fadeOut');
      document.getElementById('images').appendChild(img);
      return img;
    });
    
    var _PART = 0;
    
    var _PART_INDEX = 0;
    
    var _INTERVAL_VAL;
    
    var _ELEMENT = document.querySelector("#text");
    
    function Type() { 
      var text =  _CONTENT[_PART].substring(0, _PART_INDEX + 1);
      _ELEMENT.innerHTML = text;
      _PART_INDEX++;
    
      if(text === _CONTENT[_PART]) {
    
      let imgIndexBase = _PART*3;
        IMAGES[imgIndexBase].classList.remove('fadeOut');
        IMAGES[imgIndexBase+1].classList.remove('fadeOut');
        IMAGES[imgIndexBase+2].classList.remove('fadeOut');
        setTimeout(function() { IMAGES[imgIndexBase].classList.add('fadeIn','show'); }, 0);
        setTimeout(function() { IMAGES[imgIndexBase].classList.add('fadeOut'); }, 2000);
        setTimeout(function() { IMAGES[imgIndexBase].classList.remove('fadeOut','show'); }, 3000);
        setTimeout(function() { IMAGES[imgIndexBase+1].classList.add('fadeIn','show'); }, 3000);
        setTimeout(function() { IMAGES[imgIndexBase+1].classList.add('fadeOut'); }, 5000);
        setTimeout(function() { IMAGES[imgIndexBase+1].classList.remove('fadeOut','show'); }, 7000);
        setTimeout(function() { IMAGES[imgIndexBase+2].classList.add('fadeIn','show'); }, 7000);
        setTimeout(function() { IMAGES[imgIndexBase+2].classList.add('fadeOut'); }, 9000);
        setTimeout(function() { IMAGES[imgIndexBase+2].classList.remove('fadeOut','show'); }, 10000);
      
    
    
    
        clearInterval(_INTERVAL_VAL);
        setTimeout(function() {
          _INTERVAL_VAL = setInterval(Delete, 50);
        }, 11000);
    
      }
    }
    
    
    
        function Delete() {
      var text =  _CONTENT[_PART].substring(0, _PART_INDEX - 1);
      _ELEMENT.innerHTML = text;
      _PART_INDEX--;
    
      // If sentence has been deleted then start to display the next sentence
      if(text === '') {
     
    
    
        clearInterval(_INTERVAL_VAL);
    
        // If last sentence then display the first one, else move to the next
        if(_PART == (_CONTENT.length - 1))
          _PART = 0;
        else
          _PART++;
        _PART_INDEX = 0;
    
        // Start to display the next sentence after some time
        setTimeout(function() {
          _INTERVAL_VAL = setInterval(Type, 100);
        }, 500);
      }
    }
    
    _INTERVAL_VAL = setInterval(Type, 100);
    
    </script>

【问题讨论】：

这可能是 let 关键字，因为任何形式的 IE 都不支持它。请检查控制台是否有任何错误。但是请让我们把 IE 抛在脑后，即使 IE11 已经有 7 年历史了——在浏览器方面是古老的历史，几乎没有人使用它（MS 自 2015 年以来已移至 Edge）。至于 IE9，那是更古老的历史了——可能还有一些人还在使用 IE11，但肯定不是 IE9！
请注意，假设 let 确实是问题所在，并且您确实必须在 IE 上完成这项工作，那么在这里只需将 let 替换为 var 就可以了。
IE 不支持箭头功能。
哦，是的，我错过了箭头功能——这在 IE 中绝对行不通
我认为您还应该提供css代码，因为您在图像上使用了fadeIn、fadeOut等一些类。我们不知道类属性是否与 IE 兼容。文本动画与类无关，但图像动画与类有关。因此，通过 css 代码，我们可以更好地理解问题并了解如何提供帮助。

标签： javascript jquery internet-explorer

【解决方案1】：

对于 es6 语法问题，我想你已经根据 cmets 和答案更正了。您应该在代码中修复另一个问题：IE 11 doesn't support 在classList 中为add() 和remove() 提供多个参数。所以你不能使用像

这样的代码

setTimeout(function() { IMAGES[imgIndexBase].classList.add('fadeIn','show'); }, 0);

你需要改成

setTimeout(function () { IMAGES[imgIndexBase].classList.add('fadeIn'); }, 0);
setTimeout(function () { IMAGES[imgIndexBase].classList.add('show'); }, 0);

对于代码中带有多个参数的其他 classList.add() 和 classList.remove() 也是如此。

所以你的代码 sn-p 的编辑部分如下所示：

//edit arrow function

var IMAGES = IMAGE_URLS.map(function (url, index) {
    var img = document.createElement('img');
    img.setAttribute('src', url);
    img.classList.add('anim' + (index % 3 + 1));
    img.classList.add('fadeOut');
    document.getElementById('images').appendChild(img);
    return img;
});

//edit classList in function Type()

let imgIndexBase = _PART * 3;
IMAGES[imgIndexBase].classList.remove('fadeOut');
IMAGES[imgIndexBase + 1].classList.remove('fadeOut');
IMAGES[imgIndexBase + 2].classList.remove('fadeOut');
setTimeout(function () { IMAGES[imgIndexBase].classList.add('fadeIn'); }, 0);
setTimeout(function () { IMAGES[imgIndexBase].classList.add('show'); }, 0);
setTimeout(function () { IMAGES[imgIndexBase].classList.add('fadeOut'); }, 2000);
setTimeout(function () { IMAGES[imgIndexBase].classList.remove('fadeOut'); }, 3000);
setTimeout(function () { IMAGES[imgIndexBase].classList.remove('show'); }, 3000);
setTimeout(function () { IMAGES[imgIndexBase + 1].classList.add('fadeIn'); }, 3000);
setTimeout(function () { IMAGES[imgIndexBase + 1].classList.add('show'); }, 3000);
setTimeout(function () { IMAGES[imgIndexBase + 1].classList.add('fadeOut'); }, 5000);
setTimeout(function () { IMAGES[imgIndexBase + 1].classList.remove('fadeOut'); }, 7000);
setTimeout(function () { IMAGES[imgIndexBase + 1].classList.remove('show'); }, 7000);
setTimeout(function () { IMAGES[imgIndexBase + 2].classList.add('fadeIn'); }, 7000);
setTimeout(function () { IMAGES[imgIndexBase + 2].classList.add('show'); }, 7000);
setTimeout(function () { IMAGES[imgIndexBase + 2].classList.add('fadeOut'); }, 9000);
setTimeout(function () { IMAGES[imgIndexBase + 2].classList.remove('fadeOut'); }, 10000);
setTimeout(function () { IMAGES[imgIndexBase + 2].classList.remove('show'); }, 10000);

在 IE 11 中的结果：

【讨论】：

【解决方案2】：

您尝试使用 IE 不支持的 lambda 函数和 map ES6 函数。如果你使用 jQuery，那么你可以使用 jQuery 等效的 ES6 映射函数：

var mappedArray = $.map(realArray, function(val, i ) {
  // Do something
});

您还应该使用 var 代替 IE 也不支持的 let 和 const 关键字。

替换你的数组函数

IMAGE_URLS.map((url, index) => {}

与：

jQuery.map(IMAGE_URLS, function (url, index)
{
  //mapping code here
}

【讨论】：

抱歉，您介意具体说明一下我应该写什么吗？我是新手，坦率地说不知道你在说什么关于 lambda 函数和 ES6 映射。
Lambda 也称为箭头函数 () => {}。您应该使用我上面提到的传统 function() {} 语法。我还举了一个例子，如何使用 jQeury 映射函数。
这里不需要任何 jQuery - 只需使用常规 JS map（如在 OP 中），但将箭头函数替换为常规 function 表达式。由于内部没有使用this，因此这里的结果不会有任何影响。
使用 jQuery 映射功能确实启用了文本动画（谢谢） - 我这里有 2 组动画，文本和 IMAGE 动画。图像动画根本不起作用 - 如何解决这个问题？
@lukbrt 除了数组函数之外还有什么需要更改的吗？