页面需要嵌套在跨域的iframe中,而页面高度不固定,需要每个页面把自己的高度获得后,通过js通知iframe调整显示。

而页面在获得自己的高度时,发现总是比预想的大。经过参考别人的博客,发现原来是w3c标准的原因。

也就是要在<html>前面加上<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

加上之后,document.documentElement.scrollHeight在IE和Chrome下,可以正常取到合适的全文高度,但是firefox下取到的则过高;用document.body.scrollHeight取则恰好相反。

因此最后采用了Math.min(document.documentElement.scrollHeight,document.body.scrollHeight)获得最小高度,正常。

但是加上W3C标准后,画面也出现了一些小的不同,比如页面的行间距,似乎IE的就要短一些,有些地方重合了。而且css也会严格区分大小写。

参考博客url:

http://jianzhong5137.blog.163.com/blog/static/98290492011522202281/

内容:

js获取页面高度

2011-06-02 14:20:02|  分类:JavaScript |  标签:body  document  clientwidth  宽度  页面高度  |字号大中小 订阅

 
 
<script> 
function getInfo() 

var s = ""; 
s += " 网页可见区域宽:"+ document.body.clientWidth; 
s += " 网页可见区域高:"+ document.body.clientHeight; 
s += " 网页可见区域宽:"+ document.body.offsetWidth + " (包括边线和滚动条的宽)"; 
s += " 网页可见区域高:"+ document.body.offsetHeight + " (包括边线的宽)"; 
s += " 网页正文全文宽:"+ document.body.scrollWidth; 
s += " 网页正文全文高:"+ document.body.scrollHeight; 
s += " 网页被卷去的高(ff):"+ document.body.scrollTop; 
s += " 网页被卷去的高(ie):"+ document.documentElement.scrollTop; 
s += " 网页被卷去的左:"+ document.body.scrollLeft; 
s += " 网页正文部分上:"+ window.screenTop; 
s += " 网页正文部分左:"+ window.screenLeft; 
s += " 屏幕分辨率的高:"+ window.screen.height; 
s += " 屏幕分辨率的宽:"+ window.screen.width; 
s += " 屏幕可用工作区高度:"+ window.screen.availHeight; 
s += " 屏幕可用工作区宽度:"+ window.screen.availWidth; 
s += " 你的屏幕设置是 "+ window.screen.colorDepth +" 位彩色"; 
s += " 你的屏幕设置 "+ window.screen.deviceXDPI +" 像素/英寸"; 
//alert (s); 

getInfo(); 
< /script> 
在我本地测试当中: 
在IE、FireFox、Opera下都可以使用 
document.body.clientWidth 
document.body.clientHeight 
即可获得,很简单,很方便。 
而在公司项目当中: 
Opera仍然使用 
document.body.clientWidth 
document.body.clientHeight 
可是IE和FireFox则使用 
document.documentElement.clientWidth 
document.documentElement.clientHeight 
原来是W3C的标准在作怪啊 
< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
如果在页面中添加这行标记的话

在IE中: 
document.body.clientWidth ==> BODY对象宽度 
document.body.clientHeight ==> BODY对象高度 
document.documentElement.clientWidth ==> 可见区域宽度 
document.documentElement.clientHeight ==> 可见区域高度 
在FireFox中: 
document.body.clientWidth ==> BODY对象宽度 
document.body.clientHeight ==> BODY对象高度 
document.documentElement.clientWidth ==> 可见区域宽度 
document.documentElement.clientHeight ==> 可见区域高度 

在Opera中: 
document.body.clientWidth ==> 可见区域宽度 
document.body.clientHeight ==> 可见区域高度 
document.documentElement.clientWidth ==> 页面对象宽度(即BODY对象宽度加上Margin宽) 
document.documentElement.clientHeight ==> 页面对象高度(即BODY对象高度加上Margin高) 
而如果没有定义W3C的标准,则 
IE为: 
document.documentElement.clientWidth ==> 0 
document.documentElement.clientHeight ==> 0 
FireFox为: 
document.documentElement.clientWidth ==> 页面对象宽度(即BODY对象宽度加上Margin宽)document.documentElement.clientHeight ==> 页面对象高度(即BODY对象高度加上Margin高)
Opera为: 
document.documentElement.clientWidth ==> 页面对象宽度(即BODY对象宽度加上Margin宽)document.documentElement.clientHeight ==> 页面对象高度(即BODY对象高度加上Margin高)
真是一件麻烦事情,其实就开发来看,宁可少一些对象和方法,不使用最新的标准要方便许多啊。

 

最新文章

  1. [译]IIS 8.0应用初始化
  2. wangEditor ie9 表单上传图片
  3. python输入输出
  4. 《轻量级Java Web整合开发入门SSH》 - 快速理解Java框架的又一积木
  5. BIEE从底层表结构向上更新
  6. mysql概要(六)连接
  7. Autoresizing和AutoLayout
  8. plsql 登录后,提示数据库字符集(AL32UTF8)和客户端字符集(ZHS16GBK)不一致
  9. TCP/IP 教程
  10. JAVA学习资料整理
  11. 深入理解JavaScript Hijacking原理
  12. 用Delphi实现Windows的鼠标钩子函数
  13. WEB前端开发中的图片压缩
  14. CM5(5.11.0)和CDH5(5.11.0)离线安装
  15. emscripten、 WebAssembly,传递字符串给c函数
  16. ionic3 打包 混淆代码
  17. delphi 多线程之System.TMonitor (续一)
  18. springmvc搭配nginx 实现动静分离
  19. delphi 通过事务插入数据
  20. Xdebug、XHProf 、OneAPM 和 SocketLog

热门文章

  1. Java 实现顺序查找
  2. java_一对一自由聊天
  3. 解决Ubuntu下sublime中不能输入中文的问题
  4. 在jsp中的css
  5. php有三种工作模式
  6. 学习笔记_Filter小结(过滤器JavaWeb三大组件之一)
  7. Cell的重用机制
  8. java新手笔记10 构造器
  9. js简单日期获取( 菜鸟入门基础)
  10. (poj)3414 Pots (输出路径的广搜)