深入解析IE11中被废止的JS方法

Form中按钮

这是按钮

上面这样的按钮如果在form之外，没有什么问题，但如果在form中，在IE较早版本没发现什么，点击仅仅执行myFunction()函数，但是在IE11中，问题严重了，点击此按钮，不但执行myFunction()函数，而且立马提交form表单。如果你设定了提交严查，这样的提交根本不会被检查而直接提交，你敢说问题不严重？解决的办法是使用来代替。

另外，在早前版本中，下面的用法是可以正常显示的

IE11不能这样写了，要写成下面这样才能正常显示： 这是按钮

window.ActiveXObject

在IE早期版本中，window.ActiveXObject返回是true，IE11中不是这样了，返回的是一串这样的字符：function ActiveXObject(){[nativ code]}，显然，仅以此来判断是不是IE肯定不行了，考虑到对早期IE版本的兼容性，在创建ajax实例对象时，建议使用下面的方法来判断：

if(!!window.ActiveXObject || \http_request = new ActiveXObject(\}else{

http_request = new XMLHttpRequest(); }

框架页JS函数的执行问题

在框架页上，如果有自动执行的JS函数，要放在页面的上面部分，不能放在最后面，否则不能自行启动。这种情况在IE早期版本中并无问题，在IE11中却不行。参见下图:

写在这里才行 自启动函数写在这里不能自动运行

window.navigate不被推荐

window.navigate(url)在IE11中将不再推荐使用但仍然可以用，建议改用标准window.location.href =url来实现页面跳转或者刷新。

关于scroll处理滚动条

控制页面是否出现滚动条，可以使用，但这个属性方法我并未在W3C标准中找到，但在IE11中确实是可用的。尽管如此，我还是建议使用更为通用的办法：

//去掉竖滚动条 //去掉横滚动条 //全部去掉

或者使用css：body{ overflow:auto; overflow-x:hidden}

关于获取CSS内部属性

之前的IE版本只能使用下面方法获取元素内部css的属性值： var computedStyle = obj.currentStyle; alert(computedStyle.paddingLeft);

现在，IE11已经支持标准的js方法，同时也保留了原来的方法

var computedStyle = document.defaultView.getComputedStyle(obj, null); alert(computedStyle.paddingLeft);

如果考虑到对以前版本的支持，可以同时使用这两种方法。

关于获取元素宽度长度计算的问题

在IE10之前的版本中，使用document.getElementById(“name”).style.width等方法获得的数据为数值型，因此可以相加减；IE11则采用标准做法，返回的是数字+px，是个字符串，不能直接做加减法了，需要使用replace将“px”去掉后再进行数学计算。

关于select 中size与height

在早期IE版本中，select多行列表时，size可以与height同时存在，但会以size为主，也就是说，浏览器会取这两个值中较大的一个（size会被换算为高度px值）。IE11中情况发生变化了，height会被优先采用，而不会考虑size，因此这两个值设置时要注意，有size时，不要再设置height了。

不再支持VBScript

从IE11开始已经不再支持VBScript作为前端脚本了，所以很遗憾，要么把IE降级，要么改用javascript。

关于使用CSS实现渐变

在IE11以前，ie有自己的渐变滤镜，即

filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#79bbff',endColorstr='#378de5',GradientType=0)

在IE11已经不支持这个滤镜了，改为使用：

background:-ms-linear-gradient(top, #79bbff 5%, #378de5 100%); 一般情况下，为了适应各类型浏览器，建议使用以下CSS .linear{

background:-webkit-gradient(linear, left top, left bottom, color-start(0.05, #79bbff), color-stop(1, #378de5));

background:-moz-linear-gradient(top, #79bbff 5%, #378de5 100%); background:-o-linear-gradient(top, #79bbff 5%, #378de5 100%); background:-ms-linear-gradient(top, #79bbff 5%, #378de5 100%); background:linear-gradient(to bottom, #79bbff 5%, #378de5 100%); background:-webkit-linear-gradient(top, #79bbff 5%, #378de5 100%);

filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#79bbff',endColorstr='#378de5',GradientType=0); }

IE11不再支持条件性注释

IE11不再支持条件性注释，下面代码不会被执行

showModalDialog打开框架页窗口太小

IE11中，使用showModalDialog（也包括showModalLessDialog）时，窗口很小（有框架的页），并且设置dialogHeight:和dialogWidth均不管用，不知道为什么，我的处理办法是要么改成window.open()来代替，要么在框架页中加上

这实际上是告诉浏览器，回退到ie7去处理该页面，这显然并不理想。

网上有种说法：“这其实是标准的问题，ie11更加标准化，frameset走的是 XHTML 1.0 Frameset，如果用其它协议可能出现此类问题，把Frameset 页面的DOCTYPE改为frameset协议或者直接把DOCTYPE 这一行删除即可。”

对此，我试了试，没好使。想必showModalDialog毕竟是IE独有的东西，一直没纳入W3C标准，或许未来某一天就被废弃了。看来，还是少用为妙。

突然想到可不可以在被打开的页面中，使用下面代码控制或者resize()以下，我不想用了，所以没有试过行不行，感兴趣的朋友可以试一下：

html5删除了frame 和 frameset

这个本来和IE11没啥关系，但既然碰到了这个问题，同时也怀疑前面的那个问题可能与此有关，也写在这里吧。

html5删除了frame 和 frameset等元素，添加了article、detailist、figure、footer、header、nav、section、source等新元素。但iframe被保留了，至于保留到什么时候，没人知道。

有人建议使用div+css（主要是div的float属性来布局）或者iframe来代替frameset。但iframe仅被有限支持，只有一个属性src，其他属性不行了。

动态部分可以使用Ajax实现，因此已经没有必要使用框架了 也有人建议使用jquery的方法来动态加载： $(\页面就可以了。

个人觉得，frame以及frameset还是很好用的，布局方便，局部更新方便，确实应该保留才对。

关于checkbox的选中问题

在IE以前版本中，document.getElementById(“checkbox_id”).checked就可以表示被选中，IE10以后版本不行，需要明确：

document.getElementById(“checkbox_id”).checked=true