IE11意外抛出SCRIPT1010错误，Ajax项目Chrome/FireFox正常运行

这种情况在IE11里特别容易让人困惑——明明错误提示指向的是HTML代码行，但问题根源其实出在之前的JavaScript代码里。IE11对ES6+语法的支持很差，而且如果JS代码有语法错误，它的错误定位经常会“跑偏”到后面的HTML内容上。结合你的场景（Chrome/Firefox正常，AJAX代码本身语法无问题），可以按以下步骤排查：

• 检查行40之前的JS代码，找IE11不兼容的语法
  IE11完全不支持很多ES6语法，这些语法在现代浏览器里能正常解析，但在IE11里会触发语法错误，导致解析器“混乱”，错误定位到后面的HTML。常见的坑包括：

  • 箭头函数：() => { /* 代码 */ } 要改成传统的function() { /* 代码 */ }
  • 模板字符串：${variable} 替换成字符串拼接"" + variable + ""
  • 对象属性简写：const obj = { username } 改成const obj = { username: username }
  • 解构赋值：const { name, id } = user 需要改成逐个取值的写法
  • 另外，IE11对let/const的支持有局限性，临时换成var试试也能快速验证是否是这个问题。

• 检查AJAX返回的内容里的JS代码
  你提到点击按钮会获取另一页面内容，如果这部分动态加载的HTML里包含JS代码，那里面的语法也可能不兼容IE11。虽然错误提示在admin文件的行40，但实际问题可能出在AJAX返回的脚本里。

• 排查未闭合的脚本块或语法错误
  如果前面的<script>标签里的JS代码有未闭合的括号、引号，或者缺少分号（IE11对分号的要求更严格），会导致浏览器把后面的HTML内容当成JS代码的一部分来解析，从而报“预期标识符”的错误。比如遗漏了函数的闭合括号：

  // 错误示例：缺了闭合的}
  function loadContent() {
    ajaxRequest(url, function(response) {
      render(response);
  // 这里没闭合，浏览器会把后面的HTML当成JS解析
  

举个具体的修复例子，如果你用了箭头函数：

// 原代码（IE11不支持）
ajax.get('/api/content', (res) => {
  document.body.innerHTML = res;
});

// 修复后
ajax.get('/api/content', function(res) {
  document.body.innerHTML = res;
});

按这个思路排查，应该能快速定位到问题所在。

内容的提问来源于stack exchange，提问作者Jesse Fender