jQuery脚本在IE中无法正常工作 [英] jQuery script doesn't work properly in IE

问题描述

我的网站上有一个带有其他JS代码的jQuery脚本.

There is a jQuery script on my website with additional JS code.

示例:

$("[data-type='phone'] .input .form-control").intlTelInput({

  allowDropdown: true,
  autoPlaceholder: "aggressive",
  initialCountry: "auto",
  geoIpLookup: function(success, failure) {
    $.get("https://ipinfo.io", function() {}, "jsonp").always(function(resp) {
      var countryCode = (resp && resp.country) ? resp.country : "";
      success(countryCode);
    });
  },
});

let targets = document.querySelectorAll('.selected-flag'),
  options = {
    'attributes': true
  },
  observationHandler = function(mutations, observer) {
    for (let mutation of mutations) {
      let target = mutation.target,
      		recipient = target.closest('div.fields').querySelector('[data-type="hidden"] input');
          recipient.value = target.title;
    }
  },
  observer = new MutationObserver(observationHandler);
  
  targets.forEach(
    (target) => 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/at5sL2jc/12/

它在Google Chrome，Opera，Edge和Mozilla浏览器中正常运行.但不幸的是，它不适用于IE 11.

It works fine in Google Chrome, Opera, Edge and Mozilla browsers. But unfortunately, it doesn't work with IE 11.

控制台显示;"预期在此字符串附近:

Console shows that ";" expected near this strings:

observationHandler = function(mutations, observer) {
    for (let mutation of mutations) {
      let target = mutation.target,

我不太了解JS，因此感到沮丧.请给我一个提示来解决这个问题.

I don't know JS well, so I'm frustrated. Please, give me a hint to to solve this issue.

我尝试了Babel服务，但在IE11中效果不佳: https://jsfiddle .net/kerm131/xpvt214o/984507/

I tried Babel service, but it doesn't works well in IE11: https://jsfiddle.net/kerm131/xpvt214o/984507/

在这种情况下，控制台说对象不支持以下属性或方法"forEach"

In this case console says that object doesn't support property or method "forEach" in

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

推荐答案

要使其正常运行，我添加了polyfill库:

To make it works I add polyfill library:

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

并更改此内容:

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

对此:

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

(但我认为没有必要，请先尝试不更改此字符串)

(but I think it not necessary, first try without changing this string)

这篇关于jQuery脚本在IE中无法正常工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！