如何用JS动态获取浏览器的宽高

IE中： 

documentbodyclientWidth ==> BODY对象宽度 

documentbodyclientHeight ==> BODY对象高度 

documentdocumentElementclientWidth ==> 可见区域宽度 

documentdocumentElementclientHeight ==> 可见区域高度

FireFox中： 

documentbodyclientWidth ==> BODY对象宽度 

documentbodyclientHeight ==> BODY对象高度 

documentdocumentElementclientWidth ==> 可见区域宽度 

documentdocumentElementclientHeight ==> 可见区域高度

Opera中： 

documentbodyclientWidth ==> 可见区域宽度 

documentbodyclientHeight ==> 可见区域高度 

documentdocumentElementclientWidth ==> 页面对象宽度（即BODY对象宽度加上Margin宽） 

documentdocumentElementclientHeight ==> 页面对象高度（即BODY对象高度加上Margin高） 

没有定义W3C的标准，则 

IE为： 

documentdocumentElementclientWidth ==> 0 

documentdocumentElementclientHeight ==> 0 

FireFox为： 

documentdocumentElementclientWidth ==> 页面对象宽度（即BODY对象宽度加上Margin宽) 

documentdocumentElementclientHeight ==> 页面对象高度（即BODY对象高度加上Margin高） 

Opera为： 

documentdocumentElementclientWidth ==> 页面对象宽度（即BODY对象宽度加上Margin宽） 

documentdocumentElementclientHeight ==> 页面对象高度（即BODY对象高度加上Margin高） 

网页可见区域宽： documentbodyclientWidth 

网页可见区域高： documentbodyclientHeight 

网页可见区域宽： documentbodyoffsetWidth (包括边线的宽) 

网页可见区域高： documentbodyoffsetHeight (包括边线的高) 

网页正文全文宽： documentbodyscrollWidth 

网页正文全文高： documentbodyscrollHeight 

网页被卷去的高： documentbodyscrollTop 

网页被卷去的左： documentbodyscrollLeft 

网页正文部分上： windowscreenTop 

网页正文部分左： windowscreenLeft 

屏幕分辨率的高： windowscreenheight 

屏幕分辨率的宽： windowscreenwidth 

屏幕可用工作区高度： windowscreenavailHeight 

屏幕可用工作区宽度： windowscreenavailWidth 

HTML精确定位:scrollLeft,scrollWidth,clientWidth,offsetWidth 

scrollHeight: 获取对象的滚动高度。 

scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离 

scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离 

scrollWidth:获取对象的滚动宽度 

offsetHeight:获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的高度 

offsetLeft:获取对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置 

offsetTop:获取对象相对于版面或由 offsetTop 属性指定的父坐标的计算顶端位置 

eventclientX 相对文档的水平座标 

eventclientY 相对文档的垂直座标 

eventoffsetX 相对容器的水平坐标 

eventoffsetY 相对容器的垂直坐标 

documentdocumentElementscrollTop 垂直方向滚动的值 

eventclientX+documentdocumentElementscrollTop 相对文档的水平座标+垂直方向滚动的量

示例：

var winWidth = 0; 

var winHeight = 0; 

function findDimensions() //函数：获取尺寸 

{ 

    //获取窗口宽度 

    if (windowinnerWidth) 

        winWidth = windowinnerWidth; 

    else if ((documentbody) && (documentbodyclientWidth)) 

        winWidth = documentbodyclientWidth; 

    //获取窗口高度 

    if (windowinnerHeight) 

        winHeight = windowinnerHeight; 

    else if ((documentbody) && (documentbodyclientHeight)) 

        winHeight = documentbodyclientHeight; 

    //通过深入Document内部对body进行检测，获取窗口大小 

    if (documentdocumentElement && documentdocumentElementclientHeight && documentdocumentElementclientWidth) 

    { 

        winHeight = documentdocumentElementclientHeight; 

        winWidth = documentdocumentElementclientWidth; 

    } 

    //结果输出至两个文本框 

    documentform1availHeightvalue= winHeight; 

    documentform1availWidthvalue= winWidth; 

} 

findDimensions(); 

//调用函数，获取数值 

windowonresize=findDimensions;

网页可见区域宽：documentbodyclientWidth;

网页可见区域高：documentbodyclientHeight;

网页可见区域高：documentbodyoffsetWidth

(包括边线的宽);

网页可见区域高：documentbodyoffsetHeight

(包括边线的宽);

网页正文全文宽：documentbodyscrollWidth;

网页正文全文高：documentbodyscrollHeight;

网页被卷去的高：documentbodyscrollTop;

网页被卷去的左：documentbodyscrollLeft;

网页正文部分上：windowscreenTop;

网页正文部分左：windowscreenLeft;

屏幕分辨率的高：windowscreenheight;

屏幕分辨率的宽：windowscreenwidth;

屏幕可用工作区高度：windowscreenavailHeight;

屏幕可用工作区宽度：windowscreenavailWidth;

var s ="网页可见区域宽："+ documentbodyclientWidth;s+="\r\n网页可见区域高："+ documentbodyclientHeight;s += "\r\n网页正文全文宽："+ documentbodyscrollWidth;s += "\r\n网页正文全文高："+ documentbodyscrollHeight;s += "\r\n网页正文部分上："+ windowscreenTop;s += "\r\n网页正文部分左："+ windowscreenLeft;s += "\r\n屏幕分辨率的高："+ windowscreenheight;s += "\r\n屏幕分辨率的宽："+ windowscreenwidth;s +="\r\n屏幕可用工作区高度："+ windowscreenavailHeight;s +="\r\n屏幕可用工作区宽度："+ windowscreenavailWidth;alert(s);</SCRIPT>

采用JavaScript来控制iframe元素的高度是iframe高度自适应的关键，同时由于JavaScript对不同域名下权限的控制，引发出同域、跨域两种情况。

由于客户端js使用浏览器的同源安全策略，跨域情况下，被嵌套页面如果想要获取和修改父页面的DOM属性会出现权限不足的情况，提示错误：Permission denied to access property 'document'。这是因为除了包含脚本的文档载入的主机外，同源策略禁止客户端脚本链接到其他任何主机或者访问其他任何主机的数据。这意味着访问一个web服务的javascript代码通常只有在它也驻留在Web服务本身所在的同一个服务器的时候才有用。

所以在跨域情况下，我们遇到的问题就是：父窗口无法获得被嵌套页面的高度,而且被嵌套页面也无法通过驻留在其服务器上的js修改父窗口Dom节点的属性。所以我们需要一个媒介，来获得被嵌套页面的高度同时又能修改主界面iframe节点的高度。

思路：现有主界面main在域a下，被嵌套页面B在域b下，被嵌套页面B又嵌套一个在域a下的中介页面A。当用户打开浏览器访问mailhtml的时候载入B，触发B的onload事件获取其自身高度，然后B载入A,并将高度值作为参数赋值给A的location对象。这样A就可以通过locationhash获得B的高度。（location是javascript里边管理地址栏的内置对象，比如locationhref就管理页面的url，用locationhref=url就可以直接将页面重定向url。而locationhash则可以用来获取或设置页面的标签值。比如>

关键代码：

iframe主页面：mainhtml

<iframe id="iframeB"  name="iframeB" src=">

iframe嵌套页面：Bhtml

<iframe id="iframeA" name="iframeA" src="" width="0" height="0" style="display:none;" ></iframe> 

<script type="text/javascript">

function sethash(){

hashH = documentdocumentElementscrollHeight; //获取自身高度

urlC = ">

中介页面：Ahtml

<script>

function pseth() {

var iObj = parentparentdocumentgetElementByIdx_x_x_x('iframeB');//A和main同域，所以可以访问节点

iObjH = parentparentframes["iframeB"]frames["iframeA"]locationhash;//访问自己的location对象获取hash值

iObjstyleheight = iObjHsplit("#")[1]+"px";// *** 作dom

}

pseth();

</script>

同域情况下就不用多说了，直接在被嵌套的页面B中获取其自身高度并 *** 作其父窗口main的dom属性即可。

页可见区域宽： documentbodyclientWidth

网页可见区域高： documentbodyclientHeight

网页可见区域宽： documentbodyoffsetWidth (包括边线的宽)

网页可见区域高： documentbodyoffsetHeight (包括边线的高)

网页正文全文宽： documentbodyscrollWidth

网页正文全文高： documentbodyscrollHeight

网页被卷去的高： documentbodyscrollTop

网页被卷去的左： documentbodyscrollLeft

网页正文部分上： windowscreenTop

网页正文部分左： windowscreenLeft

屏幕分辨率的高： windowscreenheight

屏幕分辨率的宽： windowscreenwidth

屏幕可用工作区高度： windowscreenavailHeight

屏幕可用工作区宽度： windowscreenavailWidth

以上就是关于如何用JS动态获取浏览器的宽高全部的内容，包括:如何用JS动态获取浏览器的宽高、在html中，怎么获取当前页面body的高度，body是没有设置高度的，但是里面有内容、JS如何获取页面可见区域高度等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！