找回密码
 注册

'HTMLElement' 未定义 'window.HTMLElement.prototype' 为空或不是对象

php 发表于 2017/12/30 21:37 | 显示全部楼层 |阅读模式
'HTMLElement' 未定义
TypeError: 'HTMLElement' 未定义
'window.HTMLElement.prototype' 为空或不是对象
TypeError: 'window.HTMLElement.prototype' 为空或不是对象

Internet Explorer的知名毛病,搞前端的一定遇见过。window.HTMLElement.prototype和HTMLElement.prototype是等效的,通过给HTMLElement原型上增加方法,可以很方便地给所有元素对象增加指定的功能方法。
比如以下代码运行以后,每个HTML元素都具有了hide()方法,假设oElement是一个DOM元素对象,调用oElement.hide()就可以隐藏oElement元素。
  1. <script>
  2. window.HTMLElement.prototype.hide = function(){
  3.                 this . style . display = 'none';
  4.         };
  5. </script>
复制代码
然而在IE浏览器中,window.HTMLElement为undefined,所以想给HTMLElement原型添加方法是不可能的,解决方法就是不要在window.HTMLElement.prototype上增加方法,而是在window.Element.prototype上增加,对于IE 8而言,window.Element是存在的。
经过改造以后,以下代码可以兼容IE 8了。
  1. <script>
  2.         window.Element.prototype.hide = function(){
  3.                 this . style . display = 'none';
  4.         };
  5. </script>
复制代码
但是不要得意得太早,这里面还有坑,那就是IE的文本模式,IE允许把高版本的IE模拟成低版本IE,这个“贴心”功能对于浏览那些开发GOV网站和银行网站的蒙事儿学徒程序员开发出来的垃圾网站非常有用,IE浏览器的兼容性视图,就是以IE 7标准去“兼容”那些人写出来的网页,如果网页被“兼容了”,IE文档模式变成了IE 7,那么window.Element也不存在了,以上代码又会失效。

可以在HTML<head>中添加一个meta标签,要求IE以最高版本显示网页。当然也可以把以下代码中的edge改成6 7 8等数字,数值大于当前IE的版本时和Edge是等效的。比如在IE 11中设置为128,实际上还是11.
  1. <meta http-equiv="X-UA-Compatible" content="IE=edge" />
复制代码
也可以添加HTTP响应头实现,以PHP为例
  1. header('X-UA-Compatible: IE=edge');
复制代码
即使使用了X-UA-Compatible,IE的文档模式仍然可以被人为切换,可以使用js的document.documentMode取得文本模式,比如文本模式是IE 8标准模式时,取得的值就是8,可以通过这个值去做判断,再去做兼容处理,需要注意的是IE8-11支持document.documentMode,更低版本不支持。

实在不行,可以使用终极兼容大法,就是不兼容旧版IE浏览器,遇到使用祖传浏览器的访客时,直接提示他换浏览器,时代已经不同了,花80%的力气去做20%的事情没有什么意义。

手机版|轻松E站

轻松E站

快速回复 返回顶部 返回列表