На данный вопрос уже ответили:
У меня на сайте работает замечательный скрипт, который по 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/
Если что-то не хватает - сначала поищи полифил. Кстати вот он 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. Убери это слово и заработает.
Апостиль в Лос-Анджелесе без лишних нервов и бумажной волокиты
Основные этапы разработки сайта для стоматологической клиники
Продвижение своими сайтами как стратегия роста и независимости