【转】JS获取浏览器可视区域的尺寸

from: http://www.xiaoboy.com/detail/1341545044.html 

 

      所谓可视区域是指能看得见的区域，即在浏览器中能看到页面的区域（高度与宽度）。刚刚使用 document.body.clientHeight 来获取可视区域的高度得到的却是整个文档的高度，然后在cnblogs.com的一篇文章中获知需要通过 document.documentElement.clientHeight 才能获取到浏览器的可视区域的高度，顺便将该文章摘下来，如下：

在没有声明DOCTYPE的IE中，浏览器显示窗口大小只能以下获取：


1

2

document.body.offsetWidth

document.body.offsetHeight

        在声明了DOCTYPE的浏览器中，可以用以下来获取浏览器显示窗口大小：


1

2

document.documentElement.clientWidth

document.documentElement.clientHeight

        IE，FF，Safari皆支持该方法，opera虽支持该属性，但是返回的是页面尺寸；

        同时，除了IE以外的所有浏览器都将此信息保存在window对象中，可以用以下获取：


1

2

window.innerWidth

window.innerHeight

摘自《记录前端那些事儿》

时间： 2024-10-27 17:33:22

【转】JS获取浏览器可视区域的尺寸的相关文章

JavaScript获取窗口可视区域的宽高的例子

在jQuery中我们很容易就可以获取整个浏览器窗口可视区域的宽高:  代码如下 复制代码 alert($(window).height()); //浏览器时下窗口可视区域高度 alert($(document).height()); //浏览器时下窗口文档的高度 alert($(document.body).height());//浏览器时下窗口文档body的高度 alert($(document.body).outerHeight(true));//浏览器时下窗口文档body的总高度 包括bo

原生JS 获取浏览器、窗口、元素等尺寸总结

一.通过浏览器获得屏幕的尺寸 screen.widthscreen.height screen.availHeight //获取去除状态栏后的屏幕高度screen.availWidth  //获取去除状态栏后的屏幕高度 二.获取浏览器窗口内容的尺寸 //高度window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight //宽度window.innerWidth || docume

js获取浏览器高度 窗口高度 元素尺寸 偏移属性的方法_javascript技巧

如下所示: screen.width screen.height screen.availHeight //获取去除状态栏后的屏幕高度 screen.availWidth //获取去除状态栏后的屏幕高度 一.通过浏览器获得屏幕的尺寸 二.获取浏览器窗口内容的尺寸 //高度 window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight //宽度 window.innerWidth

JS 获取浏览器和屏幕宽高等信息代码

 这篇文章主要介绍了JS 获取浏览器和屏幕宽高等信息的具体实现,需要的朋友可以参考下 网页可见区域宽:document.body.clientWidth  网页可见区域高:document.body.clientHeight  网页可见区域宽:document.body.offsetWidth (包括边线的宽)  网页可见区域高:document.body.offsetHeight (包括边线的宽)  网页正文全文宽:document.body.scrollWidth  网页正文全文高:docu

js 获取浏览器的高度和宽度信息类

网页可见区域宽: document.body.clientWidth; 网页可见区域高: document.body.clientHeight; 网页可见区域宽: document.body.offsetWidth + " (包括边线和滚动条的宽)"; 网页可见区域高:document.body.offsetHeight + " (包括边线的宽)"; 网页正文全文宽:document.body.scrollWidth; 网页正文全文高:document.body.s

网页制作技巧:获取页面可视区域的高度

文章简介:获取页面可视区域高度,获取页面高度,获取滚动条滚动上去的页面高度. function getWH(){ var wh = {}; "Height Width".replace(/[^\s]+/g,function(a){ var b = a.toLowerCase(); wh[b]=window["inner".concat(a)] document.compatMode ==="CSS1Compat" && docum

Javascript代码实例:JS获取浏览器宽度

文章简介:js获取浏览器窗口宽高及网页宽高. js获取浏览器窗口宽高及网页宽高: /** / THIRD FUNCTION * getPageSize() by webjx.com * * @return Array Return an array with page width, height and window width, height */function ___getPageSize() { var xScroll, yScroll; if (window.innerHeight &

html2canvas 只捕捉到了浏览器可视区域的内容，怎么捕捉指定dom里面的所有内容

问题描述 html2canvas 只捕捉到了浏览器可视区域的内容,怎么捕捉指定dom里面的所有内容 html2canvas 只捕捉到了指定dom对象浏览器可视区域的内容,怎么捕捉指定dom里面的所有内容?就是包括滚动条下面的内容

js获取浏览器用户信息再创建不同版本的flash组件

这是一款利用了在flash网站的代码,他是利用js获取浏览器用户信息再创建不同版本的flash组件实例,这样很好的兼容大部份主流浏览器就ok了. */ var isie  = (navigator.appversion.indexof("msie") != -1) ? true : false; var iswin = (navigator.appversion.tolowercase().indexof("win") != -1) ? true : false;