'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元素。

<script>
window.HTMLElement.prototype.hide = function(){
this . style . display = 'none';
};
</script>

复制代码

然而在IE浏览器中，window.HTMLElement为undefined，所以想给HTMLElement原型添加方法是不可能的，解决方法就是不要在window.HTMLElement.prototype上增加方法，而是在window.Element.prototype上增加，对于IE 8而言，window.Element是存在的。
经过改造以后，以下代码可以兼容IE 8了。

<script>
window.Element.prototype.hide = function(){
this . style . display = 'none';
};
</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.

<meta http-equiv="X-UA-Compatible" content="IE=edge" />

复制代码

也可以添加HTTP响应头实现，以PHP为例

header('X-UA-Compatible: IE=edge');

复制代码

即使使用了X-UA-Compatible，IE的文档模式仍然可以被人为切换，可以使用js的document.documentMode取得文本模式，比如文本模式是IE 8标准模式时，取得的值就是8，可以通过这个值去做判断，再去做兼容处理，需要注意的是IE8-11支持document.documentMode，更低版本不支持。

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

账号		自动登录	找回密码
密码			新建账号