关于获取各种浏览器可见窗口大小的一点点研究

news/2024/7/21 6:07:29 标签: 浏览器, firefox, opera, xhtml, ie, 工作
iews" class="htmledit_views">
<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 = " 网页被卷去的高(ff):" document.body.scrollTop; 
s = " 网页被卷去的高(ie):" document.documentElement.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 " 像素/英寸"; 
//alert (s); 
} 
getInfo(); 
</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高)

http://www.niftyadmin.cn/n/1732301.html

相关文章

Linux发行版Gentoo被发现有漏洞,在SQL注入方面存在安全风险

近日有消息表明&#xff0c;Gentoo Linux发行版中存在漏洞CVE-2023-28424&#xff0c;并且极有可能被黑客利用该漏洞进行SQL注入攻击。 据悉&#xff0c;研究人员从 GentooLinux的Soko搜索组件中找到了这个漏洞&#xff0c;并且该漏洞的CVSS风险评分为 9.1&#xff0c;属于特别…

防抖和节流的应用场景和实现

防抖 防抖就是将一段时间内连续的多次触发转化为一次触发。使用场景 一般可以使用在用户输入停止一段时间过后再去获取数据&#xff0c;而不是每次输入都去获取&#xff0c;如下图&#xff1a; 实现代码 function debounce<Return>(fn: (...params: any[]) > Return,…

js用currentStyle和getComputedStyle获取css样式(非行间)

用js的style属性可以获得html标签的样式&#xff0c;但是不能获取非行间样式。那么怎么用js获取css的非行间样式呢&#xff1f;在IE下可以用currentStyle&#xff0c;而在火狐下面我们需要用到getComputedStyle。下面是一个小示例&#xff1a; <html xmlns"http://www.…

如何停止使用console.log并开始用浏览器的debugger

By Parag Zaveri | Oct 1, 2018 原文 当我开始我的软件开发工程师之旅时&#xff0c;发现在这个过程中经历了许多困难。其中一个最常见的困难就是每个新手都会遇到的-调试。起初&#xff0c;当我发现可以打开控制台查看console.log()输出的值以定位bug&#xff0c;我像是发现…

IE6 动态创建 iframe 无法显示的 bug

动态弹出浮层&#xff0c;跨域加载一个 iframe 页面&#xff0c;发现 IE6 下无法正常显示。见图所示&#xff1a; 最初怀疑是 innerHTML 方式创建 iframe 节点导致的&#xff1a; document.getElementById(a).innerHTML <iframe width"500" height"100&quo…

iOS 12 JS数组Bug,可能带来互联网风波,附解决方案

喜气洋洋&#xff0c;被安利使用iOS12&#xff0c;红红火火&#xff0c;更新最新版本。 网络上已经有人遇到 iOS 数组相关的一个Bug&#xff0c;似乎会酿成整个互联网风波。 Array state will be cached in iOS 12 Safari, is bug or feature? -- stackoverflow iOS 12 的 s…

9月,水了几个大中厂前端面试的一些总结分享 | 掘金技术征文

写在前面 工作吧&#xff0c;我觉得就像谈恋爱&#xff0c;不一定是找高富帅或者白富美&#xff0c;互相确认过眼神是对的人就可以~而面试的自信和对工资的要求&#xff0c;源于你过硬的基础和平时的思考、积累以及总结~ 8月底离职&#xff0c;其实是裸辞&#xff0c;当然大概是…

使用jQuery的message插件实现右下角弹出消息框

有时在页面加载的时候&#xff0c;需要在页面的右下角弹出一个小的提示框&#xff0c;显示一些提示信息给用户&#xff0c;通过使用jQuery的message插件&#xff0c;可以很方便的实现这个效果&#xff0c;在使用之前先介绍一下message插件中的方法的使用。 1.$.messager.lays(w…