在 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>");
最佳答案
问题: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重写
简单的用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 .
“构建系统”可以像批处理文件一样简单。 如果你告诉你的老板,这将保护有值(value)的公司知识产权,他可能会给你适当学习知识产权所需的时间。
拯救网络:不支持 IE 11
我知道,我知道。 您不会问它是否是一个选项。
但您的老板可能没有意识到 IE 支持需要花费更多的开发时间,这意味着更高的成本、更慢的交付速度和更少的利润。
很少有人 (3.2%) 在现实世界中使用 IE 11 - 少于“UC 浏览器”(8%)、“Firefox”(6%)、“三星互联网”(3.6%) 或“Opera”( 3.4%)。 (统计计数器 May 2017 global stat 。) 如果用户或客户问您为什么不支持 Samsung browser , 说没有人使用它不是一个好的借口,因为 IE 11 的用户更少。
大多数 IE 用户都知道,如果它在 IE 中不起作用,请尝试使用 Chrome。 鼓励他们先使用 Chrome,最后使用 IE 就好了。 它们更安全,网络更明亮,每个人都很开心。
关于javascript - .js 文件适用于 chrome 和 firefox 但不适用于 IE,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44630980/