Javascript / css не работает в Internet Explorer

ProgramBox

Javascript / css не работает в Internet Explorer

Post author:admin
Запись опубликована:7 марта, 2023
Post category:Вопросы по программированию

#javascript #jquery #internet-explorer

Вопрос:

Я тестирую свой сайт в Internet Explorer через сайт тестирования браузера (например, лямбда-тест) — и он вообще не работает. Ничего не происходит, никакого движения. Что здесь происходит и как мне это исправить? Я тестировал это как на IE 11, так и на IE 9.

Из этой статьи: Как включить JavaScript в 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=96amp;d=identiconamp;r=PG','https://i.stack.imgur.com/qxeUf.jpg?s=96amp;g=1','https://i.stack.imgur.com/4xczZ.jpg?s=96amp;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>

1. Вероятно, это let ключевое слово, поскольку оно не поддерживается ни в одной форме IE. Проверьте консоль на наличие ошибок. Но, пожалуйста, давайте просто оставим IE позади, даже IE11 7 лет — древняя история с точки зрения браузера, и практически никто ею не пользуется (MS перешли на Edge с 2015 года). Что касается IE9, это еще более древняя история — возможно, несколько человек все еще используют IE11, но, конечно, не IE9!

2. Обратите внимание, что, если предположить let , что это действительно проблема, и вам действительно нужно заставить это работать в IE, тогда простая замена let на var здесь должна быть в порядке.

3. IE не поддерживает функции стрелок.

4. о да, я пропустил функцию стрелки — это определенно не будет работать в IE

5. Я думаю, вам также следует предоставить код css, потому что вы используете некоторые классы, такие как fadeIn , fadeOut и так далее на изображениях. Мы не знаем, совместимы ли свойства класса с IE. Текстовая анимация не имеет ничего общего с классами, но анимация изображения связана с классами. Таким образом, с помощью кода css мы можем лучше понять проблему и посмотреть, как помочь.

Ответ №1:

Я думаю, что вы исправили проблему с синтаксисом es6 в соответствии с комментариями и ответом ealier. Есть еще одна проблема, которую вы должны исправить в своем коде: IE 11 не поддерживает несколько аргументов для add() amp; remove() in classList . Таким образом, вы не можете использовать код, подобный

 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() с несколькими аргументами в вашем коде.

Итак, отредактированная часть вашего фрагмента кода выглядит следующим образом:

 //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:

Вы пытаетесь использовать функции lambda и функцию map ES6, которые не поддерживаются IE. Если вы используете jQuery, вы можете использовать эквивалент jQuery функции отображения ES6:

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

Вы также должны использовать var вместо ключевых слов let и const, которые также не поддерживаются IE.

Замените вашу функцию массива

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

с:

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

1. Извините, не могли бы вы уточнить, что именно я должен написать? Я новичок и, честно говоря, понятия не имею, что вы говорите о функциях lambda и карте ES6.

2. Лямбда-выражение также известно как функции со стрелками () => {}. Вы должны использовать традиционный синтаксис function() {}, который я обозначил выше. Я также привел вам пример, как использовать функцию сопоставления jQeury.

3. здесь нет необходимости в jQuery — просто используйте обычный JS map (как в OP), но замените функцию стрелки регулярным function выражением. Поскольку this не используется внутри, это не повлияет на результат здесь.

4. использование функции сопоставления jQuery включило текстовую анимацию (спасибо) — у меня здесь есть 2 набора анимации, анимация текста и изображения. Анимация изображения не работает вообще — как это исправить?

5. @lukbrt есть ли другие вещи, кроме функции массива, которые мне нужно изменить?