.js文件适用于chrome和firefox但不适用于IE

Question

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

我在页面的页脚中加载名为'custom.js'的.js文件以及其他页面特定的插件(jquery和bootstrap都加载到头部),如下所示:

<!-- 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

问题:2013年发布的Internet Explorer 11未运行ECMAScript 2015(原因很明显).

肮脏的方式:巴别(独立)

最快但也是效率最低的方式.不要在生产中使用.

<!-- Load the in-browser babel compiler.  Make sure page encoding is UTF-8. -->
<script src="https://unpkg.com/babel-standalone@6/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中重写

只需重写custom.jsES5 的最后几行,并特别注意以后不要使用任何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支持需要更多的开发时间,这意味着更高的成本,更慢的交付和更少的利润.

很少有人(3.2%)在现实世界中使用IE 11 - 低于"UC浏览器"(8%),"Firefox"(6%),"三星互联网"(3.6%)或"Opera"(3.4%) .(Statcounter的2017年5月全球统计).如果一个用户或客户问你为什么不支持的 三星浏览器,说没有人使用它是不是一个很好的借口,因为IE 11甚至更少的用户.

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