各种浏览器的可见性

<script>
function getInfo(){
         var s = "";
         s += "网页可见区域宽:"+ document.body.clientWidth;
         s += "网页可见区域高:"+ document.body.clientHeight;
         s += "网页可见区域宽:"+ document.body.offsetWidth + " (包括边线和滚动条的宽)";
         s += "网页可见区域高:"+ document.body.offsetHeight + " (包括边线的宽)";
         s += "网页正文全文宽:"+ document.body.scrollWidth;
         s += "网页正文全文高:"+ document.body.scrollHeight;
         s += "网页被卷去的高:"+ document.body.scrollTop;
         s += "网页被卷去的左:"+ document.body.scrollLeft;
         s += "网页正文部分上:"+ window.screenTop;
         s += "网页正文部分左:"+ window.screenLeft;
         s += "屏幕分辨率的高:"+ window.screen.height;
         s += "屏幕分辨率的宽:"+ window.screen.width;
         s += "屏幕可用工作区高度:"+ window.screen.availHeight;
         s += "屏幕可用工作区宽度:"+ window.screen.availWidth;
         s += "你的屏幕设置是 "+ window.screen.colorDepth +" 位彩色";
         s += "你的屏幕设置 "+ window.screen.deviceXDPI +" 像素/英寸";
}
</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高)

关于获取各种浏览器滚动条的高度

在这里提供一个函数,作为参考

var w3c=(document.getElementById)? true: false;
var agt=navigator.userAgent.toLowerCase();
var ie = ((agt.indexOf("msie") != -1) && (agt.indexOf("opera") == -1) && (agt.indexOf("omniweb") == -1));

function IeTrueBody(){
    return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body;
}

function GetScrollTop(){
    return ie ? IeTrueBody().scrollTop : window.pageYOffset;
}
时间: 2024-07-28 22:59:11

各种浏览器的可见性的相关文章

APM终端用户体验监控分析(下)

一.前言 APM 终端用户体验监控分析(上)从 APM 终端用户产品特性.使用建议.以及从真实用户体验和模拟性能监控两方面入手给大家进行了简单的分享. 本文为下篇,将给大家介绍几种新的 APM 终端用户体验监控的方式. 二.基于网络的数据包捕获 基于网络的数据包捕获工具对执行应用无任何影响,且不要求改变代理或软件,因此无需进行大量的应用测试就可得出所需值.须在网络适当位置设计流量聚合层,且须使用矩阵或专业网络设备以对正在被发送到监控系统的流量进行更多粒状过滤.流量聚合网络不仅可用于 APM 使用

浏览器,tab页显示隐藏的事件监听--页面可见性

//监听浏览器tab切换,以便在tab切换之后,页面隐藏的时候,把弹幕停止 document.addEventListener('webkitvisibilitychange', function() { if (document.hidden === true) { //页面已隐藏 } else { //页面显示 } }, false); 可参考: https://developer.mozilla.org/zh-CN/docs/Web/Guide/User_experience/Using_

Android 横向ScrollView照片浏览器实现(致敬郭神)

因为项目中需要用到所以实现的一个横向的照片浏览器,使用横向SrollView实现. 实现效果如下: 实现思路: 在开始做之前呢,本着有轮子就用轮子的精神,也还是去百度找了很久,诸如"Android横向照片墙"."Android横向照片流"."Android横向照片选择器"-完全没有好咩..查来查去都是那几篇竖向照片瀑布流的,横向的反正我是没找到. 然后,在将郭神的<ndroid瀑布流照片墙实现,体验不规则排列的美感>一文拜读之后(ht

浏览器工作原理简介

一.浏览器主要构成 1. 用户界面 - 包括地址栏.后退/前进按钮.书签目录等,也就是你所看到的除了用来显示你所请求页面的主窗口之外的其他部分. 2. 浏览器引擎 - 用来查询及操作渲染引擎的接口. 3. 渲染引擎 - 用来显示请求的内容,例如,如果请求内容为html,它负责解析html及css,并将解析后的结果显示出来. 4. 网络 - 用来完成网络调用,例如http请求,它具有平台无关的接口,可以在不同平台上工作. 5. UI后端 - 用来绘制类似组合选择框及对话框等基本组件,具有不特定于某

现代浏览器的工作原理

浏览器的主要组件包括: 用户界面- 包括地址栏.后退/前进按钮.书签目录等,也就是你所看到的除了用来显示你所请求页面的主窗口之外的其他部分 浏览器引擎- 用来查询及操作渲染引擎的接口 渲染引擎- 用来显示请求的内容,例如,如果请求内容为html,它负责解析html及css,并将解析后的结果显示出来 网络- 用来完成网络调用,例如http请求,它具有平台无关的接口,可以在不同平台上工作 UI 后端- 用来绘制类似组合选择框及对话框等基本组件,具有不特定于某个平台的通用接口,底层使用操作系统的用户接

浏览器的工作机制

一.概述 网络浏览器可能是最广泛使用的软件了.本文中我将解释它们在幕后是如何工作的,我们将看到从你在地址栏中输入"google.com",直到谷歌的页面出现在浏览器屏幕的过程中发生了什么. 1.我们将要讨论的浏览器 现在主要有五种浏览器被使用,分别是:IE.火狐.Safari.Chrome和欧朋.根据W3C浏览器的统计资料,目前(2009年9月),Firefox, Safari and Chrome浏览的使用份额总和将近有60%. 因此在当前,开源浏览器是浏览器市场的中坚力量. 2.浏

使用iOS8 WKWebView的浏览器模块,脉冲动画层-b

KINWebBrowser是一个可嵌入app的浏览器模块. 它使用iOS 8的 WKWebView API编写,同时在iOS 7上使用UIWebView来兼容. 测试环境: Xcode 6.0 iOS 7.0 PulsingHalo - 脉冲动画层 一个轻量级的脉冲动画层,实现简单. BrickView - 简单的动态网格布局瀑布流view BrickView是一个简单的动态网格布局瀑布流view,类似于Pinterest.用法类似于UITableViewDelegate 和 UITableVi

前端必读:浏览器内部工作原理

前端必读:浏览器内部工作原理 作者: Tali Garsiel  发布时间: 2012-02-09 14:32  阅读: 56974 次  推荐: 88   原文链接   [收藏] 目录 一.介绍 二.渲染引擎 三.解析与DOM树构建 四.渲染树构建 五.布局 六.绘制 七.动态变化 八.渲染引擎的线程 九.CSS2可视模型 英文原文:How Browsers Work: Behind the Scenes of Modern Web Browsers 一.介绍 浏览器可以被认为是使用最广泛的软

浏览器的工作原理解析

PART1 有关浏览器的内核 一.Trident内核,代表产品IE Trident内核又称为IE内核.是微软开发的一种排版引擎.1997年与IE4一起诞生.虽然它相对于其它浏览器核心还比较落后,但trident一直在被不断地更新和完善.而且除IE外,许多产品都在使用Trident核心,比如Windows的HELP程序.RealPlayer.Windows Media Player.Windows Live Messager.Outlook Express等. 使用此内核的其它浏览器有:IE.傲游