IE11中JavaScript变量值自动变更问题求助

这绝对是IE11的经典坑之一！你遇到的问题根源在于全局作用域下的name变量其实是浏览器内置的window.name属性的别名，而IE11对这个属性的处理和Chrome完全不一样。

问题原因 #

window.name是浏览器用来存储窗口标识名称的内置属性，在IE11中它有特殊的行为限制：

• 它的类型被强制为字符串，哪怕你赋值其他类型也会被隐式转换
• 更关键的是，在某些场景下（比如页面内的脚本交互、甚至浏览器自身的内部操作），它的值可能被意外修改或截断，而你完全察觉不到
• 你代码里的全局name变量并没有创建新变量，而是直接在修改window.name，这就导致Chrome里正常的逻辑到了IE11里出问题

快速解决方案 #

最简单的办法就是避开使用name作为全局变量名，或者把它改成局部变量：

方案1：换个变量名

把变量名改成比如fieldName，彻底避开内置属性的干扰：

fieldName = field.name; /* 此处包含一些条件判断和substr处理 */
alert(fieldName); // 弹出内容为"postCode"
alert(fieldName == "postCode" && field.value.length < 5); // 现在会正确返回true

方案2：使用局部变量

如果一定要用name这个名字，把它放在函数作用域内，用var/let/const声明，这样就不会和window.name冲突：

function checkField(field) {
  let name = field.name; // 这里是局部变量，和window.name无关
  alert(name);
  alert(name == "postCode" && field.value.length < 5); // 逻辑正常执行
}

验证方法 #

你可以在IE11里加一行代码验证这个问题：

alert(window.name === name); // 在全局作用域下会弹出true，说明它们是同一个东西

改成局部变量后再执行这句，就会弹出false，证明变量不再和window.name绑定了。

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