`
myten
  • 浏览: 134202 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

Javascript得到当前页面可视高度和宽度

 
阅读更多
用javascript在不同的浏览器中取窗口的可视高度和页面的内容高度是个烦心的事,所用的html标准不同、页面的内容高度是否超过窗口的可视高度都会对取值产生影响,所用到的取值方法也不同。
一、取窗口的可视高度(即浏览器的上面的工具栏到下面的状态栏之间的高度)
1、IE中的取法
 document.getElementsByTagName("html")[0].offsetHeight;
2、Firefox、Chrome、Opera中取法
1 window.innerHeight;
二、取页面内容的高度(所有浏览器中的取法)
 Math.max(document.getElementsByTagName("body")[0].scrollHeight, 窗口的可视高度)
三、完整的代码如下:
//窗口的可视高度
var windowHeight=document.all ? document.getElementsByTagName("html")[0].offsetHeight : window.innerHeight;
//页面的内容高度
var pageHeight=Math.max(windowHeight, document.getElementsByTagName("body")[0].scrollHeight);
 
可视宽度:
function getWidth(){           
 var xScroll           
 if (window.innerHeight && window.scrollMaxY) 
 {       
     xScroll = document.body.scrollWidth;           
 } 
 else if (document.body.scrollHeight > document.body.offsetHeight){ 
  // all but Explorer Mac           
  xScroll = document.body.scrollWidth;           
 } else {           
  xScroll = document.body.offsetWidth;           
 } 
           
 var windowWidth          
 if (self.innerHeight) { 
  // all except Explorer           
  windowWidth = self.innerWidth;           
 } else if (document.documentElement && document.documentElement.clientHeight) { 
  // Explorer 6 Strict Mode           
  windowWidth = document.documentElement.clientWidth;           
 } else if (document.body) { 
  // other Explorers           
  windowWidth = document.body.clientWidth;          
 }           
 if(xScroll < windowWidth){           
   pageWidth = windowWidth;           
 } else {           
   pageWidth = xScroll;          
 }          
 return pageWidth;  
}  
分享到:
评论

相关推荐

    javascript 获取当前页面可视高度和宽度及浏览器宽度和高度的函数.pdf

    JavaScript 获取当前页面可视高度和宽度及浏览器宽度和高度的函数 在Web开发中,获取当前页面的可视高度和宽度,以及浏览器的宽度和高度是非常重要的。这篇文章将为大家讲解如何使用JavaScript来获取这些信息。 ...

    javascript获取当前页面可视高度和宽度及浏览器宽度和高度的函数.rar

    本压缩包文件"javascript获取当前页面可视高度和宽度及浏览器宽度和高度的函数.rar"包含了相关知识点的详细讲解,主要集中在JavaScript的DOM操作和窗口对象(Window)的属性与方法上。 1. **当前页面可视区域尺寸**...

    javascript获取当前页面可视高度和宽度及浏览器宽度和高度的函数.pdf

    在JavaScript中,获取当前页面可视区域的尺寸以及浏览器窗口的尺寸是常见的需求,这有助于进行响应式设计或者处理滚动事件。以下是一些相关的JavaScript函数,用于获取这些信息: 1. **getHeight() 函数**:这个...

    javascript 获取当前面可视高度和宽度及浏览器宽度和高度的函数.docx

    ### JavaScript 获取当前页面可视高度和宽度以及浏览器宽度和高度的函数 #### 一、概述 在Web开发过程中,经常需要获取当前页面可视区域的高度和宽度,以及整个浏览器窗口的尺寸。这些信息对于响应式设计、页面...

    javascript获取滚动条高度 页面宽度与高度

    本文将详细介绍如何使用JavaScript来获取滚动条的高度、页面的宽度和高度。 #### 一、获取滚动条高度 滚动条的高度对于实现诸如返回顶部等功能至关重要。下面介绍一个简单的方法来获取滚动条的高度: ```...

    JavaScript获取屏幕高度和宽度等信息

    `window.innerWidth`和`window.innerHeight`属性返回的是可视区域的宽度和高度,即浏览器窗口内实际可用于显示网页内容的部分。这两个属性考虑了滚动条和工具栏的存在,因此它们通常用于响应式布局设计。 示例代码...

    Javascript 获取页面高度(多种浏览器)

    这个函数会返回当前浏览器窗口的可视高度和宽度,即使在不同浏览器和标准模式下也能得到一致的结果。`window.innerHeight` 和 `window.innerWidth` 是针对现代浏览器的解决方案,当其他方法失效时,它们通常能提供...

    javascript 获取网页高度宽度.pdf

    在JavaScript中获取网页的高度和宽度是常见的需求,这有助于我们进行页面布局、滚动条处理或者自适应设计。以下是一些关于如何使用JavaScript获取网页高度、宽度以及滚动位置的关键知识点。 1. **获取窗口滚动位置...

    javascript获取页面各种高度

    在JavaScript编程语言中,开发者经常需要获取与网页和屏幕尺寸相关的数据,比如页面的可视区域、文档的实际大小以及用户屏幕的有效工作区等信息。这些数据对于优化网站布局、响应式设计以及实现某些交互功能至关重要...

    JS获取浏览器的高度和宽度

    在JavaScript中,获取浏览器的高度和宽度是常见的需求,这在进行网页布局、动态调整元素尺寸或者实现滚动事件处理时尤其重要。以下将详细介绍如何通过JavaScript获取这些信息,并探讨不同浏览器间可能存在的差异。 ...

    js获取浏览器高度和宽度值.pdf

    在JavaScript中,获取浏览器的高度和宽度是常见的需求,这有助于我们进行页面布局、响应式设计或者自适应调整。本文将详细解析如何通过JavaScript获取不同浏览器中的浏览器高度、宽度以及相关的一些其他尺寸信息。 ...

    javascript获取网页高度宽度.rar

    在JavaScript编程语言中,获取网页的高度和宽度是常见的需求,特别是在动态布局、页面滚动或响应式设计中。本文将深入探讨如何使用JavaScript有效地获取这些信息,并结合实际应用场景进行讲解。 一、窗口对象...

    jQuery 获取屏幕高度和宽度

    这段代码会在页面加载完成后立即执行,打印出当前浏览器窗口的屏幕高度和宽度。`$(document).ready()`确保在执行任何操作前,HTML文档已经完全加载完毕。 如果你在`demo`文件中找到了示例代码,你可以打开浏览器的...

    jquery 得到当前页面高度和宽度的两个函数

    ### jQuery 获取当前页面高度和宽度的方法 在前端开发过程中,我们经常会遇到需要获取浏览器窗口尺寸的需求,例如在响应式设计中调整布局、实现滚动监听效果等。jQuery 是一个流行的 JavaScript 库,它提供了丰富的...

    js获取浏览器高度和宽度值(多浏览器)

    在JavaScript中,获取浏览器的高度和宽度是常见的需求,用于适应不同的屏幕尺寸和实现响应式设计。然而,由于不同浏览器之间的差异,获取这些值的方法并不统一。本文将详细介绍如何在多种浏览器环境下,包括IE、Fire...

    js获得页面的高度和宽度的方法

    在网页开发中,获取当前页面的高度和宽度是一个常见的需求,尤其在开发响应式布局或者需要根据视口大小调整元素大小的场景中。在JavaScript中,获取页面的高度和宽度可以通过多种方式实现,选择合适的方法能够帮助...

    JS,Jquery获取各种屏幕的宽度和高度

    - 这两个属性分别用于获取可视区域的宽度和高度,不包括滚动条和边框。 2. **`document.body.offsetWidth`** 和 **`document.body.offsetHeight`**: - 这两个属性返回元素的宽度和高度,包括内容、内边距、边框...

Global site tag (gtag.js) - Google Analytics