.js文件工作在铬和Firefox但不IE浏览器

Question

当在IE11中测试我的网站时，它的某些部分不起作用，我相信问题在于我的'custom.js'文件，因为所有问题链接到JS。但是，该页面在Chrome和Firefox中完美运行。

我在页面的页脚载入名为“custom.js”的.js文件与其他页specfic插件（jQuery和引导装载在头），像这样一起：

<!-- JS Implementing Plugins --> 
<script type="text/javascript" src="/js/back-to-top.js"></script> 
<script type="text/javascript" src="/js/smoothScroll.js"></script> 
<script type="text/javascript" src="/js/jquery.parallax.js"></script> 
<script type="text/javascript" src="/js/masterslider.min.js"></script> 
<script type="text/javascript" src="/js/jquery.easing.min.js"></script> 
<script type="text/javascript" src="/js/owl.carousel.min.js"></script> 
<script type="text/javascript" src="/js/jquery.cubeportfolio.min.js"></script> 

<!-- JS Customization --> 
<script type="text/javascript" src="/js/custom.js"></script> 

<!-- JS Page Level --> 
<script type="text/javascript" src="/js/app.js"></script> 
<script type="text/javascript" src="/js/owl-carousel.js"></script> 
<script type="text/javascript" src="/js/master-slider-fw.js"></script> 
<script type="text/javascript" src="/js/jquery.owl-filter.js"></script> 
<script type="text/javascript" src="/js/material.min.js"></script> 

<script type="text/javascript"> 
    jQuery(document).ready(function() { 
     App.init(); 
     App.initCounter(); 
     App.initParallaxBg(); 
     FancyBox.initFancybox(); 
     MSfullWidth.initMSfullWidth(); 
     OwlCarousel.initOwlEvent(); 
     OwlCarousel.initOwlSingle(); 
     OwlCarousel.initOwlTwo(); 
     OwlCarousel.initOwlAbout(); 

    }); 
    $(document).ready(function(){ 
     $('.owl-carousel').owlCarousel({ 
      nav:true, 
      loop:true 
     }); 
    }); 

</script> 

<!--[if lt IE 9]> 
<script src="/plugins/respond.js"></script> 
<script src="/plugins/html5shiv.js"></script> 
<script src="/plugins/placeholder-IE-fixes.js"></script> 

内容该custom.js文件是：

$(".helpform-container:not(.displayblock)").hide(); 
    $(".helpform") 
     .on('mouseover focus', function(e) { 
      $(this).addClass("link-div-hover") 
     }) 
     .on('mouseout blur', function(e) { 
      $(this).removeClass("link-div-hover") 
     }) 
     .on('touchstart', function(e) { 
      $(this).addClass("link-div-hover") 
     }) 
     .on('touchend', function(e) { 
      $(this).removeClass("link-div-hover") 
     }) 
     .on('click', function(e) { 
      $(this).toggleClass("active"); 
      e.preventDefault(); 

      if ($(".helpform-container").is(":hidden")) { 
       $(".helpform-container").slideDown(400).addClass("displayed"); 
       analyticsevent('How can we help form', 'open'); 
      } else { 
       $(".helpform-container").slideUp(400).removeClass("displayed"); 
       $("#sticky-wrapper").css("height","auto"); 
       analyticsevent('How can we help form', 'closed'); 
      } 

      if (sitewidth < 1024) { 
       $('html,body').animate({ scrollTop: $("#howcanwehelp").offset().top - 60 }, 250); 
      } else { 
       $('html,body').delay(500).animate({ 
        scrollTop: $("#howcanwehelp").offset().top 
       }, 400); 
      } 
     }) 

    //FORM METRICS 
    if ($('.formsent').length){ 
     analyticsevent('Contact form completed', 'consultation/quote/info/media'); 
    } 

//Homepage news articles 

var divs = $(".owl-news > .news-v2"); 
let array = [ 
    { length: 1, num: 4 }, 
    { length: 2, num: 3 }, 
    { length: 2, num: 3 }, 
    { length: 3, num: 2 } 
]; 

let i = 0; 


for (let item of array) { 
    divs.slice(i, i+item.length).wrapAll(`<div id='news-${item.num}' class='col-md-${item.num}'></div>`); 
    i += item.length; 
} 

$("#news-4").before("<div class='col-md-4'><h3 id='title_featured'>Featured News</h3></div><div class='col-md-8'><h3 id='title_latest'>Latest News</h3></div>"); 

Answer 1

您使用的JavaScript let关键字，这是只有在IE11提供。更多信息here ...

如果问题仍然存在，你一定代码编译，那么你应该启动浏览器的调试器来弄清楚发生了什么事情......只要将关键字debugger;某处你的代码，浏览器将在该站暂停执行允许你检查变量...

事情是这样的：

debugger; 
$(".helpform-container:not(.displayblock)").hide(); 
... 
$("#news-4").before("<div class='col-md-4'><h3 id='title_featured'>Featured News</h3></div><div class='col-md-8'><h3 id='title_latest'>Latest News</h3></div>"); 

Answer 2

问题：Internet Explorer的11，在2013年发布的，不运行的ECMAScript 2015年（很明显原因）。

肮脏的方式：Babel（独立）

的最快，但也是最有效的方式。 请勿在生产中使用。

<!-- Load the in-browser babel compiler. Make sure page encoding is UTF-8. --> 
<script src="https://unpkg.com/[email protected]/babel.min.js"></script> 
<!-- Set script type to text/babel for on-the-fly conversion and execution --> 
<script type="text/babel" src="custom.js"></script> 
<!-- Babel need to read the script through ajax, same origin policy applies. --> 

---

痛苦的样子：改写ES5

简单地改写ES5的custom.js最后几行，要格外小心，不要使用在未来的任何ES6/7/8 +功能：

var divs = $(".owl-news > .news-v2"), 
    array = [ 
     { length: 1, num: 4 }, 
     { length: 2, num: 3 }, 
     { length: 2, num: 3 }, 
     { length: 3, num: 2 } 
    ], 
    i = 0; 

array.forEach(function(item) { 
    divs.slice(i, i+item.length).wrapAll("<div id='news-"+item.num+"' class='col-md-"+item.num+"'></div>"); 
    i += item.length; 
}); 

---

系统方式：构建脚本

合适的构建系统可以帮助您管理项目，如自动测试和部署到测试和生产系统。 他们可以做的一件事就是在部署时将ES6代码转换为ES5，并可能对它们进行缩小/混淆处理，例如使用Babel,Traceur或Closure。

“构建系统”可以像批处理文件一样简单。 如果你告诉你的老板它会保护宝贵的公司知识产权，他可能会给你正确的学习时间。

---

保存Web：不支持IE 11

我知道，我知道。 你不会问是否是一个选项。

但是，您的老板可能并不知道IE支持会花费更多的开发时间，这意味着成本更高，交付更慢，利润更少。 （8％），“火狐”（6％），“三星互联网”（3.6％）或“歌剧”的人数不多（3.2％）在现实世界中使用IE 11。 （3.4％）。 （Statcounter May 2017 global stat。） 如果用户或客户端问你为什么不支持Samsung browser，说没有人使用它不是一个很好的借口，因为IE 11的用户更少。

大多数IE用户已经了解到，如果它在IE中不起作用，请尝试Chrome。 鼓励他们先使用Chrome，最后使用IE会很好。 他们更安全，网络更加明亮，每个人都很开心。