.js文件在Chrome和Firefox中可以运行,但在IE中不能。

4
当我在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>");

当您将IE shim移动到脚本标记的顶部时会发生什么,您要针对哪些IE版本? - Severin
我把它移到了页脚js的上方,但似乎没有任何区别。这是IE11。 - user2953989
相当预料之中。您写道有些部分可以工作,而有些部分则不能。您能说明哪些部分可以工作,哪些部分不行或者您遇到的问题出现在哪个区域吗?我发现一个问题是ES6的模板语法:`<div id='news-${item.num}' class='col-md-${item.num}'></div>` - 这需要转换才能在IE11中工作,但在Chrome中可以正常工作(`foo ${bar}`也会转换为'foo ' + bar)。另外,在没有转换的情况下,let 在IE11中不起作用(应该使用var)。 - Severin
你是否收到任何JavaScript错误? - bastos.sergio
@bastos.sergio 在IE11中不行,但在模拟IE10时会显示“预期';'”,并指向第46行“let array = [”。 - user2953989
http://caniuse.com/ - david25272
3个回答

28
问题:2013年发布的Internet Explorer 11不支持ECMAScript 2015(显而易见的原因)。

笨拙的方式:Babel(独立版)

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

<!-- 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.js的最后几行中使用ES5进行重写,并且以后额外小心,不要使用任何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,可能会对它们进行缩小/混淆, 例如使用BabelTraceurClosure

"构建系统"可以简单地作为一个批处理文件存在。如果您告诉您的老板它可以保护有价值的公司知识产权,他/她可能会给您足够的时间来学习。


拯救网络:不再支持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会很好。 他们更安全,网络更明亮,每个人都会很开心。


1
作为编译所有内容的替代方案,您可以使用 polyfill.io 来检测浏览器特性并为特定功能提供 polyfills。 - david25272
1
@david25272 我们可以使用polyfill方法,但无法使用polyfill语言特性,包括letfor...of和模板字符串。这些需要使用转译器。虽然代码可以在动态注入代码(和babel)之前进行浏览器检测(并正确处理),但我希望保持答案简单。 - Sheepy

4
您正在使用 JavaScript 中的 let 关键字,该关键字仅在 IE11 上可用。更多信息请参见此处...
如果问题仍然存在,而您确定代码已经编译通过,则应该启用浏览器的调试器以找出问题所在。只需在代码中任何位置放置关键字 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>");

尽管在IE11中仍然无法正常工作,但它并不会给我任何JS错误,只是无法正常工作。 - user2953989
在IE11中,我在“for (let item of array) {”上再次遇到了相同的错误。 - user2953989
你在IE11上使用ES6...你期望会发生什么? - Airwavezx

0

检查文件是否具有非 ES5 语法的简单方法:

npm install -g es-check
es-check es5 offendingFile.js

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接