.js文件可在chrome和firefox中使用，但不能在IE中使用 [英] .js file works in chrome and firefox but not IE

问题描述

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

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.

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

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>

custom.js文件的内容为:

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

推荐答案

问题:2013年发布的Internet Explorer 11无法运行ECMAScript 2015(出于明显的原因).

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

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

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

---

痛苦的方式:在ES5中重写

只需在ES5中重写custom.js的最后几行，并格外注意不要在将来使用任何ES6/7/8 +功能:

---

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

---

系统方式:构建脚本

适当的构建系统可以帮助您管理项目，例如自动测试以及将其部署到测试和生产系统. 他们可以做的一件事是在部署时将您的ES6代码转换为ES5，并可能对它们进行最小化/模糊处理，例如使用Traceur 或关闭.

---

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.

我知道，我知道. 您不会问是否可以选择.

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

但是您的老板可能不知道IE支持会花费更多的开发时间，这意味着更高的成本，更慢的交付速度和更少的利润.

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

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

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.

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

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.

这篇关于.js文件可在chrome和firefox中使用，但不能在IE中使用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！