IE浏览器不支持箭头函数导致页面不展示问题

于 2021-12-13 11:52:33 发布
阅读量2.1k 收藏 1
点赞数
CC 4.0 BY-SA版权
分类专栏： 学习和应用 文章标签： 前端 es6 jsp
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/ZXin153/article/details/121902065
在谷歌浏览器正常展示的页面在IE中出现错误，原因是IE不支持ES6的箭头函数。由于项目是基于jsp的老项目，无法像Vue项目那样全局转码，因此通过手动将箭头函数转换为ES5的写法，成功解决了IE页面不展示的问题。此方法适用于箭头函数较少的老项目。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

问题描述：

在谷歌正常展示的页面：
在这里插入图片描述
在IE不正常展示的页面：
在这里插入图片描述
打开IE的F12，显示报错语法错误：
在这里插入图片描述
在这里插入图片描述
百度得知IE不支持箭头函数：
在这里插入图片描述
在这里插入图片描述
IE浏览器不兼容js中的ES6箭头函数

使用Vue项目的可以使用上述链接说的转码方法，因为Vue的箭头函数很多，但

最低0.47元/天 解锁文章

200万优质内容无限畅学
为什么 Vue 3 不再支持 IE 浏览器？
weixin_52648900的博客
02-19 826
一文讲述 Vue 3 不支持 IE 浏览器的原因，以及，proxy 不支持降级操作的原因，感兴趣的话，可以瞧瞧。
【兼容IE】简单的 IE9 以上兼容ES6语法、箭头函数，代码-附件资源
03-05
【兼容IE】简单的 IE9 以上兼容ES6语法、箭头函数，代码-附件资源
为什么要用PolyFill（JS中的修补匠）
热门推荐
08-06 2万+
var users = [{name:”zhangsan”,age:18},{name:”jack”,age:20}]; 这是一个对象数组。如果我们要查询名字为”jack”用户的年龄、常用的办法是什么？ 很多同学会想到遍历这个数组。我们来看看新的语法：var getUser = users.find(function(finder){ return finder.name = "jack
IE浏览器不兼容js中的ES6箭头函数
Anhk丶
04-01 2693
一、如下示例：使用es6语法（不包含Promise） script标签的type的值设为text/babel <script type="text/babel"> const arr1=[1,2,3] const arr2=[...arr1] console.log(arr2); let arr3=arr2.map((x)=>x*2) console.log(arr3)...
IE不兼容ES6箭头函数的解决方法（在浏览器中使用）
weixin_46020146的博客
04-08 382
IE不兼容ES6箭头函数的解决方法（在浏览器中使用）
ie兼容es6，ie兼容ES6的方法，包括箭头函数，Promise，async，await
qq_27628085的博客
08-27 1万+
1. 使用es6语法（不包含Promise） script标签的type的值设为text/babel &lt;script type="text/babel"&gt; const arr1=[1,2,3] const arr2=[...arr1] console.log(arr2); let arr3=arr2.map((x)=&gt;x*2) co...
[乐意黎]IE 10 不支持 let 和箭头函数
打杂人
05-15 6539
如题，由于后面维护修改了之前的某些JS 文件，导致 网页在 IE10下抛错。 折腾了半天，才研究明白。鉴于此，把 let 修改为 var , 把 箭头函数修改为普通的 function name(){}函数。 如图: ECMAScript 2015(ECMAScript 6) 新特性 1. ES2015(ES6) 新增加了两个重要的 JavaScript 关键字:块级作用域...
快速解决Vue项目在IE浏览器中显示空白的问题
12-08
因此，当Vue项目中的代码包含这些特性时，IE浏览器无法正确解析，导致JavaScript文件加载失败，进而使得整个页面无法正常渲染。 为了解决这个问题，我们需要引入`babel-polyfill`。`babel-polyfill`是Babel编译器的...
兼容性问题：处理不同版本IE浏览器下的点击事件
[兼容性问题：处理不同版本IE浏览器下的点击事件](https://img-blog.csdnimg.cn/b60adb7d12dd482fae6c977c255c844f.png) # 1. 为什么需要处理IE浏览器下的点击事件兼容性问题 在当今浏览器市场中，虽然现代浏览器如...
VUE 项目在IE11白屏报错 SCRIPT1002: 语法错误的解决
10-14
在开发Vue项目时，遇到IE11浏览器白屏并报出`SCRIPT1002: 语法错误`的问题，通常是由于IE11不支持ES6语法导致的。Vue.js自身和许多现代JavaScript库广泛使用了ES6特性，而IE11并不完全支持这些新特性。以下是一些...
浏览器函数兼容
04-17
案例:indexOf 在ECMA-262 标准 的第5版中被加入，但并非所有的浏览器都支持该方法。你可以在编写scripts时，在其开头使用以下代码，它能够允许你在没有本地支持的情况下使用indexOf方法。该算法符合ECMA-262第5版其中一项规定, 即假定 TypeError和 Math.abs 呈现它们原有的价值。
IE支持ES6箭头语法等特性
xiongge2005的专栏
01-28 751
1、node.js安装babel-core5      npm i babel-core@5 -g，最新的babel6已经没有browser.js了。 2、找到babel-core下边的四个文件     browser.js、browser.min.js、browser-polyfill.js、browser-polyfill.min.js。 3、在项目中引用，引用browser.js即可...
IE箭头函数报错(兼容ES6语法)
ydZ157的博客
12-29 1344
polyfill.js下载方法： npm install babel-polyfill --save 页面中引用"polyfill.js" 和 "babel.min.js" JS代码script标签加上 type="text/babel" <script type="text/babel"></script> polyfill.js下载 babel.min.js下载
【兼容IE】简单的 IE9 以上兼容ES6语法、箭头函数，代码
freedomVenly的博客
03-15 9507
一、如下示例：使用es6语法（不包含Promise） script标签的type的值设为text/babel 二、IE使用Promise，async,await 在头部增加polyfill.js即可。 polyfill.js安装方法：npm install babel-polyfill --save polyfill ...
JavaScript IE兼容es6，ie兼容ES6的方法，包括箭头函数，Promise，async，await
wucong60的专栏
02-14 8704
让IE支持es6语法，及箭头函数 目前所有的IE浏览器版本都不支持es6的语法 想让IE支持如下语法，需要在script标签后导入browser.min.js const addFun = (i,j) =&gt; i + j; IE使用Promise，async,await 在没有原生Promise支持的浏览器下（如IE），使用Promise会抛出未定义的错误异常。 （1）非node项目（了解p...
react ice-design ie兼容问题，由于ie浏览器不支持箭头函数，导致react项目在ie中不兼容的解决办法
Chris__wang的博客
09-26 2090
解决办法：1. package.json中的ice-script更新为1.7.2-beta.1                   2. 将启动脚本改为  start:ice dev --disabled-reload=true                   3. 保存，重启项目 【右上角点个赞，谢谢】...
vue 不支持ie11解决方案
chrispy1314的博客
09-03 4371
npm ies6-promise npm install --save babel-polyfill package.json 文件中 添加 dependencies：{ "es6-promise": "^4.2.4" }， devDependencies：{ "babel-polyfill": "^6.26.0", } main.js 文件添加 ...
修改了js但IE浏览器未修改
最新发布
03-08
<think>嗯，用户遇到了修改了JavaScript代码但IE浏览器没有生效的问题。首先，我需要考虑可能的原因。IE浏览器有多个版本，比如IE 11和更旧的版本，兼容性问题比较常见。可能用户修改了JS文件，但浏览器缓存导致旧文件被加载。这时候需要清除缓存或者强制刷新。 然后是控制台报错的问题。IE对ES6+语法支持不好，如果有使用let、箭头函数或者模板字符串，可能会导致语法错误。需要使用Babel转译或者改用var等传统语法。另外，IE对某些API的支持有限，比如fetch或addEventListener，可能需要polyfill或者条件判断来处理兼容性。 接下来是开发者工具的设置。IE的调试工具可能需要手动开启脚本调试，或者禁用缓存选项。如果工具配置不当，可能看不到最新的修改效果。 还有代码加载顺序的问题。如果JS文件在DOM加载之前执行，可能需要用DOMContentLoaded事件或者调整script标签的位置。另外，IE的事件处理可能与现代浏览器不同，比如attachEvent和addEventListener的区别，需要做兼容处理。 安全设置或组策略也可能阻止脚本执行，检查IE的安全级别是否过高，或者是否有安全软件拦截。如果是企业环境，可能受到组策略限制。 最后，确认修改的JS文件是否成功部署到服务器，本地测试时可能路径不对，或者服务器缓存未更新。可以尝试直接访问JS文件的URL，查看内容是否正确。 总结步骤：清除缓存、检查语法兼容性、处理API差异、配置开发者工具、调整代码加载顺序、检查安全设置、确认文件部署正确。如果问题依旧，用开发者工具逐步调试。</think>以下是对“修改了JS但IE浏览器未修改”问题的逐步分析和解决方案： 🔍 原因分析及解决方法： 1️⃣ 浏览器缓存问题（最常见原因） - IE会强制缓存静态文件，即使文件已更新 ✅ 解决方案： ▸ 按 `Ctrl + F5` 强制刷新页面 ▸ 打开开发者工具（F12）→ 网络选项卡 → 勾选"始终从服务器刷新" ▸ 在JS文件URL后添加版本号：`script.js?v=2` 2️⃣ 语法兼容性问题 - IE不支持ES6+语法（如箭头函数、const/let、模板字符串等） ✅ 解决方案： ▸ 使用Babel转译代码（推荐配置）： ```javascript // .babelrc 配置 { "presets": [ ["@babel/preset-env", { "targets": { "ie": "11" } }] ] } ``` ▸ 改用ES5语法： ```javascript // 错误示例：const fn = () => { ... } // 正确修改： var fn = function() { ... }; ``` 3️⃣ API兼容性问题 - IE缺失现代API（如fetch、addEventListener等） ✅ 解决方案： ▸ 添加polyfill： ```html <!-- 在head中添加 --> <script src="https://cdn.polyfill.io/v3/polyfill.min.js"></script> ``` ▸ 事件监听兼容写法： ```javascript if (element.addEventListener) { element.addEventListener('click', handler); } else if (element.attachEvent) { element.attachEvent('onclick', handler); } ``` 4️⃣ 开发者工具配置 ✅ 关键设置检查： ▸ 打开开发者工具（F12）→ 缓存 → 勾选"始终从服务器刷新" ▸ 确保"禁用脚本调试(Internet Explorer)"未勾选 ▸ 控制台 → 查看报错信息（IE的错误提示常隐藏在控制台） 5️⃣ 安全设置限制 ✅ 检查步骤： 1. 工具 → Internet选项 → 安全 → 自定义级别 2. 启用"活动脚本" 3. 关闭"启用保护模式"（临时调试用） 4. 检查是否有杀毒软件/防火墙拦截脚本 6️⃣ 文件路径问题 ✅ 验证方法： ▸ 直接访问JS文件URL（如http://domain.com/js/script.js） ▸ 检查网络请求状态（开发者工具→网络→查看JS文件状态码） ▸ 使用绝对路径：`<script src="/js/script.js"></script>` 💡 调试建议： 1. 在JS文件开头添加调试语句： ```javascript console.log('JS文件已加载 - 版本2.0'); ``` 2. 使用条件注释处理IE特有代码： ```html <!--[if IE]> <script src="ie-specific.js"></script> <![endif]--> ``` 3. 逐步注释代码段，定位出错位置 📝 补充说明： 对于IE 11用户，建议在`<meta>`标签添加： ```html <meta http-equiv="X-UA-Compatible" content="IE=Edge"> ``` 若仍无法解决，可尝试在服务器配置中添加缓存控制头： ```http Cache-Control: no-cache, no-store, must-revalidate Pragma: no-cache Expires: 0 ```
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值