时间戳

首页 > 解决方案 > IE11或IE9无法运行以下js代码

javascript - IE11或IE9无法运行以下js代码

问题描述

我用一些 js 代码制作了一个简单的 html 页面，我使用了所有 vanilla JS 并检查了是否使用了与 IE 兼容的所有功能。

问题是以下页面必须在 Google Chrome 中运行，而在 IE 中它不起作用，我在 IE11 和 IE9 中尝试过，但在两者中都不起作用。

该代码只是将点击事件添加到三个按钮，按钮 + / - 改变输入和确认按钮内的数量。

js看起来像这样：

<script>
    const btns = document.querySelectorAll('.btn-qty');
    const confirms = document.querySelectorAll('.btn-success');
    const inputs = document.querySelectorAll('.qty')
    
    confirms.forEach(function(confirm) {
     confirm.addEventListener('click', confirmHandler);
    });
    
    function confirmHandler(event) {
      event.preventDefault();
        let product_id = this.getAttribute("data-product-id");
        let option_id = this.getAttribute("data-option-id");
        let iva = parseInt(this.getAttribute("data-iva"));
        let price = this.getAttribute("data-price");
        let qty = this.getAttribute("data-qty");
        window.location.href = "_?productId=" + product_id + "&optionId=" + option_id + "&iva=" + iva + "&price=" + price + "&qty=" + qty
    }
    
    inputs.forEach(function(input) {
      input.addEventListener('change', function(event) {
          event.preventDefault();
            let btn = input.parentNode.querySelector(".input-group-prepend").querySelector('.btn-qty');
            let confirm = input.parentNode.parentNode.querySelector('.btn-success')
          let curVal = parseInt(input.value)
            confirm.setAttribute('data-qty', curVal)
            if (curVal >= 1) {
             btn.removeAttribute('disabled');
            }else if(curVal <= 1){
             btn.setAttribute('disabled', true);
            }
        }); 
    });
    
    btns.forEach(function(btn) {
     btn.addEventListener('click', function(event) {
      event.preventDefault();
      let input = btn.parentNode.parentNode.querySelector('.qty')
        let curVal = parseInt(input.value)
        let type = btn.getAttribute("data-type");
        
        if (type == 'minus') {
            if (curVal > 1) {
                input.value = curVal - 1
                input.dispatchEvent(new Event('change'));
            }
            if (parseInt(input.value) == 1) {
                btn.setAttribute('disabled', true)
            }
        }else if (type == 'plus'){
                input.value = curVal + 1
                input.dispatchEvent(new Event('change'));
        }
        
     });
    });
</script>

这是在 Chrome（顶部）和 IE11（底部）上运行的相同代码

在此处输入图像描述

这是代码的JSfiddle

标签： javascriptinternet-explorercross-browser

解决方案

我同意 Ivar 的建议。我们需要forEach在 IE 中添加 polyfill，然后它才能与 IE 中的 NodeList 和 HTMLCollection 一起使用。请添加以下 polyfill：

var ctors = [typeof NodeList !== "undefined" && NodeList, typeof HTMLCollection !== "undefined" && HTMLCollection];
for (var n = 0; n < ctors.length; ++n) {
    var ctor = ctors[n];
    if (ctor && ctor.prototype && !ctor.prototype.forEach) {
        ctor.prototype.forEach = Array.prototype.forEach;
        if (typeof Symbol !== "undefined" && Symbol.iterator && !ctor.prototype[Symbol.iterator]) {
            Object.defineProperty(ctor.prototype, Symbol.iterator, {
                value: Array.prototype[Symbol.itereator],
                writable: true,
                configurable: true
            });
        }
    }
}

此外，在 IE 中这一行还有另一个错误：

input.dispatchEvent(new Event('change'));

您需要使用以下代码dispatchEvent在 IE 中使用：

var event = document.createEvent("Event");
event.initEvent("change", false, true); 
input.dispatchEvent(event);

推荐阅读