Замена forEach для IE 11 [дубликат]

178
30 мая 2019, 16:00

На данный вопрос уже ответили:

  • IE не понимает метод forEach 1 ответ

У меня на сайте работает замечательный скрипт, который по ip определяет страну и телефонный код пользователя и отдает эти данные в скрытое поле.

К сожалению, скрипт не работает в IE 11, т.к. использует ES6.

Я сконвертировал код в Babel, но пока эта конструкция не работает.

Сначала, отладчик IE ругался на forEach в строке:

targets.forEach(function (target) { 
  return observer.observe(target, options); 
});

я ее заменил на :

for (var i = 0; i < targets.length; i++) { return observer.observe(targets[i], options);}

Теперь отладчик выдает ошибку: "Инструкция 'return' вне функции"

Подскажите, пожалуйста, где ошибка.

Полный код:

"use strict"; 
 
$("[data-type='phone'] .input .form-control").intlTelInput({ 
 
  allowDropdown: true, 
  autoPlaceholder: "aggressive", 
  initialCountry: "auto", 
  geoIpLookup: function geoIpLookup(success, failure) { 
    $.get("https://ipinfo.io", function () {}, "jsonp").always(function (resp) { 
      var countryCode = resp && resp.country ? resp.country : ""; 
      success(countryCode); 
    }); 
  } 
}); 
 
var targets = document.querySelectorAll('.selected-flag'), 
    options = { 
  'attributes': true 
}, 
    observationHandler = function observationHandler(mutations, observer) { 
  for (var _iterator = mutations, _isArray = Array.isArray(_iterator), _i = 0, _iterator = _isArray ? _iterator : _iterator[Symbol.iterator]();;) { 
    var _ref; 
 
    if (_isArray) { 
      if (_i >= _iterator.length) break; 
      _ref = _iterator[_i++]; 
    } else { 
      _i = _iterator.next(); 
      if (_i.done) break; 
      _ref = _i.value; 
    } 
 
    var mutation = _ref; 
 
    var target = mutation.target, 
        recipient = target.closest('div.fields').querySelector('[data-type="hidden"] input'); 
    recipient.value = target.title; 
  } 
}, 
    observer = new MutationObserver(observationHandler); 
 
targets.forEach(function (target) { 
  return observer.observe(target, options); 
});
.field { 
  padding: 10px 0; 
} 
 
.form-control { 
  padding: 10px; 
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/14.0.6/css/intlTelInput.css"> 
<h2>Main form on page</h2> 
<div class="fields"> 
  <div class="field" data-type="phone" style="width: 247px;"> 
    <div class="input"><input class="form-control text" type="text" data-placeholder="true" style="border-radius: 15px;"></div> 
  </div> 
  <div class="field" data-type="hidden" style="width: 247px;"> 
    <div class="input"><input class="form-control" type="text" style="border-radius: 15px;" value="hidden content"></div> 
  </div> 
</div> 
 
<!-- MODAL FORM 1 --> 
<h2>Modal form 1</h2> 
<div class="modal-body"> 
  <div class="macros-form"> 
    <div class="outer"> 
      <div class="inner"> 
        <div class="vertical none size-default"> 
          <div class="body"> 
            <div class="cont"></div> 
            <form class="form text-top" data-form="" 
              data-fields=""> 
              <div class="fields"> 
                <div class="field" data-type="phone"> 
                  <div class="name">Telefonnummer</div> 
                  <div class="input"><input class="form-control text" style="border-radius: 4px;"></div> 
                  </div> 
                <div class="field hidden" data-type="hidden"> 
                  <div class="input"><input class="form-control hidden-field" value="Hidden field"></div> 
                </div> 
              </div> 
            </form> 
            <div class="cont"></div> 
          </div> 
        </div> 
      </div> 
    </div> 
  </div> 
</div> 
 
 
<!-- MODAL FORM 2 --> 
<h2>Modal form 2</h2> 
<div class="modal-body"> 
  <div class="macros-form"> 
    <div class="outer"> 
      <div class="inner"> 
        <div class="vertical none size-default"> 
          <div class="body"> 
            <div class="cont"></div> 
            <form class="form text-top" data-form="" 
              data-fields=""> 
              <div class="fields"> 
                <div class="field" data-type="phone"> 
                  <div class="name">Telefonnummer</div> 
                  <div class="input"><input class="form-control text" style="border-radius: 4px;"></div> 
                  </div> 
                <div class="field hidden" data-type="hidden"> 
                  <div class="input"><input class="form-control hidden-field" value="Hidden field"></div> 
                </div> 
              </div> 
              <div class="macros-button"> 
                <div class="btn-out full xs-none"> 
                </div> 
              </div> 
            </form> 
            <div class="cont"></div> 
          </div> 
        </div> 
      </div> 
    </div> 
  </div> 
</div> 
 
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> 
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/14.0.6/js/intlTelInput-jquery.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/14.0.6/js/utils.js"></script>

https://jsfiddle.net/kerm131/xpvt214o/984507/

Answer 1

Если что-то не хватает - сначала поищи полифил. Кстати вот он https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach#Polyfill

Попробуй сборку полифилов

<script src="https://cdn.polyfill.io/v2/polyfill.min.js"></script>

или Modernizr.

Потом не нужен тут return. Убери это слово и заработает.

READ ALSO
Фильтр по дате utc [требует правки]

Фильтр по дате utc [требует правки]

не могу сообразить как написать фильтр по дате с/по

192
всплытие переменных после import

всплытие переменных после import

Есть ли всплытие переменной var (и соотв-но не всплытие const, let) при ее экспорте из файла? Те

167
Создание анимации на элементе [закрыт]

Создание анимации на элементе [закрыт]

Какой то ступорПытаюсь скопировать определенный эффект на блоке, но все равно как то не так получается

196