您的位置:首页 > 前端开发 > 技术笔记

Javascript获取各种浏览器可见窗口大小

2015-02-02 17:26:05

总算弄明白了为何用document.body.clientHeight,document.body.offsetHeight都没有办法获取网页可见区域的正确值,原来罪魁祸首是W3C定义的标准!!在新定义出来的标准下 document.documentElement.clientHeight在IE和火狐里都能获取正确值,下面一篇文章详细介绍了获取各种浏览器可见窗口大小这方面的差别:

  1. <script>

  2. function getInfo()

  3. {

  4.     var s = "";

  5.     s += " 网页可见区域宽:"+ document.body.clientWidth;

  6.     s += " 网页可见区域高:"+ document.body.clientHeight;

  7.     s += " 网页可见区域宽:"+ document.body.offsetWidth + " (包括边线和滚动条的宽)";

  8.     s += " 网页可见区域高:"+ document.body.offsetHeight + " (包括边线的宽)";

  9.     s += " 网页正文全文宽:"+ document.body.scrollWidth;

  10.     s += " 网页正文全文高:"+ document.body.scrollHeight;

  11.     s += " 网页被卷去的高(ff):"+ document.body.scrollTop;

  12.     s += " 网页被卷去的高(ie):"+ document.documentElement.scrollTop;

  13.     s += " 网页被卷去的左:"+ document.body.scrollLeft;

  14.     s += " 网页正文部分上:"+ window.screenTop;

  15.     s += " 网页正文部分左:"+ window.screenLeft;

  16.     s += " 屏幕分辨率的高:"+ window.screen.height;

  17.     s += " 屏幕分辨率的宽:"+ window.screen.width;

  18.     s += " 屏幕可用工作区高度:"+ window.screen.availHeight;

  19.     s += " 屏幕可用工作区宽度:"+ window.screen.availWidth;

  20.     s += " 你的屏幕设置是 "+ window.screen.colorDepth +" 位彩色";

  21.     s += " 你的屏幕设置 "+ window.screen.deviceXDPI +" 像素/英寸";

  22.     //alert (s);

  23. }

  24. getInfo();

  25. </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高)

原文地址:http://www.css88.com/article.asp?id=133

  1. 判断浏览器的类型:

  2. var ua = navigator.userAgent.toLowerCase ();

  3. var os = new Object();

  4. os.isFirefox = ua.indexOf ("gecko") != -1;

  5. os.isOpera = ua.indexOf ("opera") != -1;

  6. os.isIE = !os.isOpera && ua.indexOf ("msie") != -1;


  7. 获取浏览器区域的大小://

  8. // getPageScroll()

  9. // Returns array with x,y page scroll values.

  10. // Core code from - quirksmode.org

  11. //

  12. function getPageScroll(){

  13. var yScroll;

  14. if (self.pageYOffset) {

  15.   yScroll = self.pageYOffset;

  16. } else if (document.documentElement && document.documentElement.scrollTop){  // Explorer 6 Strict

  17.   yScroll = document.documentElement.scrollTop;

  18. } else if (document.body) {// all other Explorers

  19.   yScroll = document.body.scrollTop;

  20. }

  21. arrayPageScroll = new Array('',yScroll)

  22. return arrayPageScroll;

  23. }


  24. //

  25. // getPageSize()

  26. // Returns array with page width, height and window width, height

  27. // Core code from - quirksmode.org

  28. // Edit for Firefox by pHaez

  29. //

  30. function getPageSize(){


  31. var xScroll, yScroll;


  32. if (windows.innerHeight && window.scrollMaxY) { 

  33.   xScroll = document.body.scrollWidth;

  34.   yScroll = windows.innerHeight + window.scrollMaxY;

  35. } else if (document.body.scrollHeight > document.body.offsetHeight){ // all but Explorer Mac

  36.   xScroll = document.body.scrollWidth;

  37.   yScroll = document.body.scrollHeight;

  38. } else { // Explorer Mac...would also work in Explorer 6 Strict, Mozilla and Safari

  39.   xScroll = document.body.offsetWidth;

  40.   yScroll = document.body.offsetHeight;

  41. }


  42. var windowWidth, windowHeight;

  43. if (self.innerHeight) { // all except Explorer

  44.   windowWidth = self.innerWidth;

  45.   windowHeight = self.innerHeight;

  46. } else if (document.documentElement && document.documentElement.clientHeight) { // Explorer 6 Strict Mode

  47.   windowWidth = document.documentElement.clientWidth;

  48.   windowHeight = document.documentElement.clientHeight;

  49. } else if (document.body) { // other Explorers

  50.   windowWidth = document.body.clientWidth;

  51.   windowHeight = document.body.clientHeight;



  52. // for small pages with total height less then height of the viewport

  53. if(yScroll < windowHeight){

  54.   pageHeight = windowHeight;

  55. } else {

  56.   pageHeight = yScroll;

  57. }

  58. // for small pages with total width less then width of the viewport

  59. if(xScroll < windowWidth){ 

  60.   pageWidth = windowWidth;

  61. } else {

  62.   pageWidth = xScroll;

  63. }


  64. arrayPageSize = new Array(pageWidth,pageHeight,windowWidth,windowHeight)

  65. return arrayPageSize;

  66. }



转载:http://bbs.html5cn.org/thread-363-1-26.html


more 练手的东东
more 转载
more 最近访客