IE11 浏览器新鲜出炉,且不断占领着用户的桌面,颇有山雨欲来风满楼的恢弘气势。的确,IE近几个版本的表现大家有目共睹,看看css3、html5 的支持情况大pk,都想要给IE9、IE10 报以掌声了。那么IE11 究竟怎样呢?还没有找到最新的资料,但冲着“Immersive Browsing” (身临其境的浏览)这个来头,和Windows8 的强大支持,作为前端的我们,是不是可以想想怎么从代码层面撩拨下,逐渐揭开它的面纱呢。 有点前端经验的同学们肯定知道html 里的 FileUpload 对象,对应的是Input File 元素 ,为什么要说这个呢,因为 IE 浏览器在 FileUpload 对象这个点上一直表现得和其它浏览器“卓”尔不群,我们不是要揭面纱吗,这是个不错的点,可以在这个点上看看IE11跟标准浏览器以及跟IE旧版本有什么异同。安全性考量,Input File 元素的value 值(存放文件路径)是不允许Coder 使用js 设置的。这没什么好说的,但标准浏览器会更人性化一点,它允许你设置其value=”(非空值不能设置),当你刚上传完一张图片,想清理现场,可以设置 value=” ,IE却不行,你改不动它。或许你会问,这有什么影响呢?影响大着呢,当你连续两次上传同一张图片,第二次选择图片的时候是不会触发Input File 元素 onchange 事件的,但如果可以设置 value=”,就没有这个问题了。 html: <input id=”mytest” type=”file” /> javascript: var myt = document.getElementById('mytest'); myt.onchange = function (){ alert('changing value :' + myt.value); setTimeout(function (){ alert('设置前的value:' + myt.value); myt.value = ''; alert('设置后的value:' +myt.value); },400) } 运行以上代码可以验证前述“连续两次上传同一张图片,第二次选择图片的时候是不会触发Input File 元素 onchange 事件的”。 轮到IE11 出场了,如果你有幸装的是IE11,运行以上代码,IE浏览器一如既往的特立独行再次上演了。 好消息是,IE11 修正了value不能设置为空的问题;坏消息是,当你设置value=” 时,会再次触发 onchange 事件!(标准浏览器不会) 刹那间,邯郸学步、画虎类犬、画蛇添足…一堆成语涌入脑中。不解的人会说:这很符合逻辑啊,value从非空变为空确实是变化了啊,触发 onchange事件很正常啊。 只能说,逻辑上正常的东西放在特定的交互场景中也可能产生灾难。如此做法,原本响应图片选择的onchange 事件函数默默地会被 value=” 触发。前面已经说过,value只能设置为空,且只能通过js 设置为空,完全想不出在哪种情景下会希望给 value=’‘ 绑定一个监听事件,即便非要在此时执行某个方法,何不在设置 value=” 的同时直接调用这个方法?何必触发onchange 事件?更可怕的是,这个事件和常规的图片选择事件是平权的!最后的结果一定是,在所有onchange 事件函数中额外加上value判断,为空则返回。说IE11 画蛇添足一点都不为过! 不想恶意的揣测是否IE浏览器开发者自视甚高,完全不顾使用者的感受,非得弄出跟标准浏览器如出二辙的东西。从技术上说,这绝对仅仅只是一个 if else 的问题而已。 via:duitang |