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

郁闷。。。

IEFirefoxOperaOS浏览器 
阅读更多

搞了大半天，总算弄明白了为何用document.body.clientHeight，document.body.offsetHeight都没有办法获取网页可见区域的正确值，原来罪魁祸首是W3C定义的标准！！在新定义出来的标准下 document.documentElement.clientHeight在IE和火狐里都能获取正确值，下面一篇文章详细介绍了获取各种浏览器可见窗口大小这方面的差别：

<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.css88.com/article.asp?id=133

判断浏览器的类型：
var ua = navigator.userAgent.toLowerCase ();
var ōs = new Object();
os.isFirefox = ua.indexOf ("gecko") != -1;
os.isOpera = ua.indexOf ("opera") != -1;
os.isIE = !os.isOpera && ua.indexOf ("msie") != -1;

获取浏览器区域的大小：//
// getPageScroll()
// Returns array with x,y page scroll values.
// Core code from - quirksmode.org
//
function getPageScroll(){

 var yScroll;
 if (self.pageYOffset) {
  yScroll = self.pageYOffset;
 } else if (document.documentElement && document.documentElement.scrollTop){  // Explorer 6 Strict
  yScroll = document.documentElement.scrollTop;
 } else if (document.body) {// all other Explorers
  yScroll = document.body.scrollTop;
 }
 arrayPageScroll = new Array('',yScroll)
 return arrayPageScroll;
}
 
//
// getPageSize()
// Returns array with page width, height and window width, height
// Core code from - quirksmode.org
// Edit for Firefox by pHaez
//
function getPageSize(){
 
 var xScroll, yScroll;
 
 if (window.innerHeight && window.scrollMaxY) { 
  xScroll = document.body.scrollWidth;
  yScroll = window.innerHeight + window.scrollMaxY;
 } else if (document.body.scrollHeight > document.body.offsetHeight){ // all but Explorer Mac
  xScroll = document.body.scrollWidth;
  yScroll = document.body.scrollHeight;
 } else { // Explorer Mac...would also work in Explorer 6 Strict, Mozilla and Safari
  xScroll = document.body.offsetWidth;
  yScroll = document.body.offsetHeight;
 }
 
 var windowWidth, windowHeight;
 if (self.innerHeight) { // all except Explorer
  windowWidth = self.innerWidth;
  windowHeight = self.innerHeight;
 } else if (document.documentElement && document.documentElement.clientHeight) { // Explorer 6 Strict Mode
  windowWidth = document.documentElement.clientWidth;
  windowHeight = document.documentElement.clientHeight;
 } else if (document.body) { // other Explorers
  windowWidth = document.body.clientWidth;
  windowHeight = document.body.clientHeight;
 } 
 
 // for small pages with total height less then height of the viewport
 if(yScroll < windowHeight){
  pageHeight = windowHeight;
 } else {
  pageHeight = yScroll;
 }
 // for small pages with total width less then width of the viewport
 if(xScroll < windowWidth){ 
  pageWidth = windowWidth;
 } else {
  pageWidth = xScroll;
 }

 arrayPageSize = new Array(pageWidth,pageHeight,windowWidth,windowHeight)
 return arrayPageSize;
}
分享到：
| 用JS访问操作iframe里的dom
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    郁闷发泄专家2007

    【郁闷发泄专家2007】是一款专为缓解情绪压力设计的趣味软件。这款软件主要针对那些在工作、生活中遇到困扰，需要寻找途径释放情绪的用户。通过模拟各种有趣的互动方式，如“砸桌面”和“放虫子”，帮助用户以虚拟的...

    郁闷时好好发泄的工具

    标题中的“郁闷时好好发泄的工具”似乎指的是一个软件应用，可能是为了帮助用户缓解压力、放松心情。在IT行业中，这种类型的应用通常涉及到心理健康、娱乐或者放松技术。描述中的内容重复了标题，没有提供额外的信息...

    控制屏幕郁闷发泄专家

    控制屏幕郁闷发泄专家控制屏幕郁闷发泄专家

    郁闷的出纳员（伸展树） C语言

    标题中的“郁闷的出纳员”是一个比喻，实际上是指一种数据结构问题，即高效地处理大量的查找、插入和删除操作。在这个场景下，“伸展树”（Splay Tree）是解决这个问题的关键数据结构。伸展树是一种自调整的二叉搜索...

    谈谈职场上你最郁闷什么.doc

    【职场郁闷】在职场中，人们面临的困扰不仅仅是薪资待遇、晋升空间或工作环境的问题，更重要的是能否在工作中找到成就感和实现自我价值。2004年的调查显示，22%的职场人士表示工作缺乏成就感是最让他们郁闷的事情。...

    PJBlog2 郁闷的圣诞

    【PJBlog2 郁闷的圣诞】是一款基于PJBlog平台的网页模板，主要针对的是那些在节日季节希望为自己的博客增添节日氛围的用户。PJBlog是一个开源的个人博客系统，它提供了一套易于使用和自定义的框架，使得非专业程序员...

    C#郁闷问题解决集合源码

    在C#编程中，开发者经常会遇到各种挑战性的技术问题，这些问题可能会令人感到“郁闷”。本文将探讨一些常见的C#编程难题及其解决方案，并提供相关的源码示例，帮助开发者更好地理解和解决这些问题。 首先，"C#"作为...

    郁闷作业.html

    郁闷作业.html

    jQuery+css3制作郁闷的古瓜脸表情动画特效源码.zip

    在本资源中，"jQuery+css3制作郁闷的古瓜脸表情动画特效源码.zip" 提供了一种利用jQuery和CSS3技术实现的趣味动画效果，即一个具有情感变化的“古瓜脸”表情。这个项目可能是为了展示如何将这两种强大的前端技术结合...

    ios中NSThread停止比较郁闷的问题

    本篇文章将深入探讨“iOS中NSThread停止比较郁闷的问题”，并提供相关的解决方案。 首先，我们需要了解NSThread的工作原理。NSThread是Objective-C中对线程的一种封装，它允许我们创建和管理自定义的执行线程。创建...

    在裸奔2440时候遇到的GPIO郁闷问题

    标题中的“在裸奔2440时候遇到的GPIO郁闷问题”指的是在使用S3C2440这款基于ARM920T内核的微处理器进行裸机编程时，作者遇到了GPIO（General Purpose Input/Output）相关的困扰。S3C2440是一款广泛应用在嵌入式系统...

    WildPackets OmniPeek从入门到郁闷之入门篇.pdf

    ### WildPackets OmniPeek 入门篇知识点详解 #### 一、WildPackets OmniPeek简介 **WildPackets OmniPeek**是一款强大的网络分析工具，被广泛应用于网络管理和故障排查领域。它能够捕获并分析网络中的数据包，帮助...

    郁闷了，一个最简单的Spring小程序都没搞定

    标题中的“郁闷了，一个最简单的Spring小程序都没搞定”表明博主在尝试开发一个基于Spring框架的小程序时遇到了问题。这通常涉及到Spring的核心概念，如依赖注入（Dependency Injection, DI）、ApplicationContext、...

    形容心情郁闷的话.doc

    形容心情郁闷的话.doc

    郁闷发泄器

    心情、无聊时可发泄用，比较真实，好玩。还迎使用，谢谢合作！

    郁闷发泄者

    【标题】：“郁闷发泄者”实际上是一款专为那些感到无聊或者需要释放压力的人设计的软件集合。这个软件包可能包含一系列有趣的、富有娱乐性的恶搞程序，旨在通过轻松幽默的方式帮助用户缓解情绪，打破日常生活的单调...

    Soluto是一款号称“反郁闷”的系统工具

    Soluto是一款号称“反郁闷”的系统工具，这家来自以色列的开发方承诺让电脑运行得更好。Soluto可以监视你的PC，发现用户面临的问题。比如打印机问题，导致系统崩溃的软件，过渡消耗资源的程序等。更有意思的是公司还...

    关于很郁闷很失落的心情说说参考.doc

    关于很郁闷很失落的心情说说参考.doc

Magicbox
Global site tag (gtag.js) - Google Analytics