页面的渲染模式所引起的问题

来源：互联网发布：淘宝联盟不让推广了编辑：程序博客网时间：2024/05/21 06:55

窗体元素是指页面上有边框的元素控件，随之带来的是宽高距左距上等属性
最大的窗体元素是document.documentElement，它表示文档的显示的所有区域。
其后为document.body它表示控件元素显示的区域。
一般来说document.documentElement与document.body会有填充padding几个像素，以达到一些显示效果。

页面初加载时有渲染上的区别，用document.compatMode表示：
* 如果页面声明了DOCTYPE那么采用document.compatMode=="CSS1Compat"为 Standards Mode标准模式
对于标准模式在初加载时就已经可以使用document.documentElement窗体。
* 如果页面没声明DOCTYPE那么采用Quirks Mode快捷模式
对于快捷方式在初加载时仍不能使用document.documentElement，直至页面加载结束

另外不论是何种渲染模式，document.body只能在页面加载结束之后有效。

以下是IE与FF的测试：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>登录页面</title>
<script>
alert("documentElement1:"+document.documentElement.clientHeight);
alert('body1:'+document.body.clientHeight);
</script>
<s:head/>
</head>

<body>
。。。。。。。 。。。。。。。。 。。。。。。。。。。。。 。。。。。。。。。。。。 。。。。。。。。。。。。。。。。。 
。。。。。。。 。。。。。。。。 。。。。。。。。。。。。 。。。。。。。。。。。。 。。。。。。。。。。。。。。。。。 
。。。。。。。 。。。。。。。。 。。。。。。。。。。。。 。。。。。。。。。。。。 。。。。。。。。。。。。。。。。。 
。。。。。。。 。。。。。。。。 。。。。。。。。。。。。 。。。。。。。。。。。。 。。。。。。。。。。。。。。。。。 
。。。。。。。 。。。。。。。。 。。。。。。。。。。。。 。。。。。。。。。。。。 。。。。。。。。。。。。。。。。。 
。。。。。。。 。。。。。。。。 。。。。。。。。。。。。 。。。。。。。。。。。。 。。。。。。。。。。。。。。。。。 
</body>
<script>
alert("documentElement2:"+document.documentElement.clientHeight);
alert('body2:'+document.body.clientHeight);
</script>
</html>

说明：documentElement1与body1是初加载是调用，documentElement2与body2是页面加载结束时调用
第一行<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
去掉为快捷模式渲染，加入为标准模式渲染。
值得一提的是documentElement1与body1的交换执行顺序时，documentElement1不会被执行，这是因为body1打印出错之后忽略下面的语句

总结：由于document.documentElement与document.body存在不可靠性（不容易得知数据何时存在），所以对于页面加载是一个效果，我们建议
此类的js代码应写在页面加载完毕之后执行，如上例的</body>之后，或onload，或css中。