用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获取当前页面可视高度和宽度及浏览器宽度和高度的函数.pdf
javascript获取当前页面可视高度和宽度及浏览器宽度和高度的函数.rar
javascript 获取当前面可视高度和宽度及浏览器宽度和高度的函数.docx
javascript 获取滚动条高度 页面宽度 页面高度 教程
Javascript浏览器和屏幕各种高度宽度.pngJavascript浏览器和屏幕各种高度宽度.png
javascript获取设置div的高度和宽度兼容任何浏览器.docx
使用JavaScript获取屏幕高度和宽度等信息
资源名称:JavaScript数据可视化编程内容简介:数据可视化是实现数据价值的重要工具。数据可视化可以将抽象的数字累积转变成为图形、表单等,让普通人可以快速理解数据所代表的情况或趋势。本书是学习如何用...
主要介绍了javascript获取隐藏元素(display:none)的高度和宽度的方法,实现方法比较复杂,需要的朋友可以参考下
js判断上传图片大小,宽度,高度,javascript判断上传图片大小,宽度,高度
期末大作业JavaScript疫情数据可视化分析系统项目源码,代码注释,新手也看的懂。 期末大作业疫情数据可视化分析系统项目源码,代码注释,新手也看的懂。期末大作业疫情数据可视化分析系统项目源码,代码注释,新手...
本文实例讲述了JavaScript获得当前网页来源页面(即上一页)的方法。分享给大家供大家参考。具体如下: 下面的JS代码通过document.referrer获得来源页面地址 <!DOCTYPE html> <html> <body> The ...
前端可视化静态页面和可视化大屏是 Web 前端开发中常见的两种应用场景。下面我将分别介绍它们的特点和常用的技术。 可视化静态页面 可视化静态页面主要用于展示数据和信息,并通过图表、图形等可视化元素呈现给用户...
基于Vue与JavaScript的数据大屏可视化编辑器设计与实现
JavaScript实现的可视化表单设计器源码.zip JavaScript实现的可视化表单设计器源码.zip JavaScript实现的可视化表单设计器源码.zip JavaScript实现的可视化表单设计器源码.zip JavaScript实现的可视化表单设计器源码...
JavaScript开发3D物联电器可视化系统可视化电器控制系统源码。JavaScript开发3D物联电器可视化系统可视化电器控制系统源码。JavaScript开发3D物联电器可视化系统可视化电器控制系统源码。JavaScript开发3D物联电器...
数据结构课程设计作业-基于Vue和JavaScript实现约瑟夫问题可视化演示源码.zip数据结构课程设计作业-基于Vue和JavaScript实现约瑟夫问题可视化演示源码.zip数据结构课程设计作业-基于Vue和JavaScript实现约瑟夫问题...
javascript获取浏览器的高度和宽度