.js file works in chrome and firefox but not IE

问题:

When testing my website out in IE11 certain parts of it don't work and I believe the issue lies with my 'custom.js' file as all the problems link to that js. However, the page works perfectly in Chrome and Firefox.

I load the .js file called 'custom.js' in the footer of my page along with other page specfic plugins (jquery and bootstrap are loaded in the head) like so:

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

The contents of the custom.js file is:

$(".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>");

回答1:

Problem: Internet Explorer 11, released in 2013, does not run ECMAScript 2015 (for obvious reason).

Dirty Way: Babel (Standalone)

The quickest but also the least efficient way. Don't use in production.

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

---

Painful Way: Rewrite in ES5

Simply rewrite the last few lines of custom.js in ES5, and be extra care not to use any ES6/7/8+ features in the future:

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;
} );

---

Systematic Way: Build Script

A proper build system can help you manage the project, such as automatic testing and deployment to test and production system. One of the things they can do is to convert your ES6 code to ES5 on deployment and maybe minify / obfuscate them, for example with Babel, Traceur, or Closure.

The "build system" can be as simple as a batch file. If you tell your boss it'll protect valuable company intellectual properties (s)he may give you the time you need to properly learn one.

---

Save the Web: Don't support IE 11

I know, I know. You won't be asking if it's an option.

But your boss may not be aware that IE support costs more development time, which means higher cost, slower delivery, and less profit.

Few people (3.2%) use IE 11 in the real world - less than "UC Browser" (8%), "Firefox" (6%), "Samsung Internet" (3.6%), or "Opera" (3.4%). (Statcounter May 2017 global stat.) If a user or client ask why don't you support the Samsung browser, saying no one use it is not a good excuse, as IE 11 has even less users.

Most IE users have learned that if it doesn't work in IE, try Chrome. Encourage them to use Chrome first and IE last will be good. They are safer, the web is brighter, everyone is happy.

回答2:

You're using the javascript let keyword, which is only available on IE11. More information here...

If the problem persists and you are sure the code is compiling, then you should activate the browser's debugger to figure out what's going on... Just place the keyword debugger; somewhere in your code, and the browser will suspend execution at that stop allowing you to inspect the variables...

Something like this:

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>");