`
karaschee
  • 浏览: 15202 次
  • 性别: Icon_minigender_1
  • 来自: 四川
社区版块
存档分类
最新评论

【转载】Javascript获取各种浏览器可见窗口大小

阅读更多

呼呼,搞了大半天,总算弄明白了为何用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 os = 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 (windows.innerHeight && window.scrollMaxY) { 
  xScroll = document.body.scrollWidth;
  yScroll = windows.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;
}
分享到:
评论

相关推荐

    JavaScript 获取浏览器的显示区域大小信息

    ### JavaScript 获取浏览器的显示区域大小信息 在网页开发过程中,获取浏览器显示区域的大小是非常重要的一个环节,这对于响应式设计、动态布局调整等场景尤为重要。本文将详细介绍如何使用JavaScript来获取浏览器...

    javascript获取浏览器临时目录

    ### JavaScript 获取浏览器临时目录知识点详解 #### 一、概述 在Web开发中,有时需要获取浏览器的临时目录以便进行文件操作或数据缓存等任务。然而,由于浏览器安全策略的限制,JavaScript直接获取本地文件系统...

    JS获取浏览器窗口大小

    ### JS 获取浏览器窗口大小 在前端开发中,经常需要获取浏览器窗口的大小,以便于根据不同的屏幕尺寸调整页面布局或实现响应式设计。本文将详细介绍如何使用JavaScript来获取浏览器窗口的宽度、高度以及相关的属性...

    js实现浏览器窗口大小被改变时触发事件的方法

    在web开发中,调整浏览器窗口大小是常见的用户操作之一,JavaScript提供了一种机制,允许我们在窗口大小变化时执行特定的代码。这篇文章的重点是介绍如何使用JavaScript中的window对象的onresize事件来实现当浏览器...

    javascript自定义浏览器窗口

    在本文中,我们将深入探讨如何利用JavaScript来实现自定义浏览器窗口的功能,包括窗口拖动、放大缩小、最小化以及全屏操作。 一、窗口拖动 在JavaScript中,我们可以使用事件监听来实现窗口拖动的功能。首先,我们...

    JS获取各种浏览器窗口大小的方法

    本文将详细介绍如何使用JavaScript获取各种浏览器窗口的大小,并解释这些方法的兼容性及其适用场景。 首先,最直接的方法是通过浏览器提供的Window对象的属性来获取窗口尺寸。Window对象提供了`innerWidth`和`...

    JS获取浏览器窗口大小获取屏幕,浏览器,网页高度宽度[文].pdf

    在JavaScript中,获取浏览器窗口、屏幕以及网页的高度和宽度是常见的需求,这在网页布局、动态调整元素尺寸、响应式设计等方面非常有用。以下是一些关键的JavaScript属性和方法,用于获取这些信息: 1. **网页可见...

    JS针对浏览器窗口关闭事件的监听方法集锦

    在JavaScript中,监听浏览器窗口关闭事件对于实现特定的用户交互或数据保存功能至关重要。下面将详细介绍几种常用的浏览器关闭事件监听方法。 1. 方式一:适用于IE浏览器,仅在关闭时提示 ```javascript window....

    页面前端获取浏览器及PC的一些信息

    javascript, 获取各种浏览器相关信息和获取电脑PC的信息, 磁盘, 主板, CPU等

    javascript获取窗口属性值

    其中一项常见需求是获取浏览器窗口的各种属性值,比如宽度、高度等,这对于响应式设计或某些特定功能(如弹窗位置计算)非常有用。 #### 一、主要窗口属性 在提供的代码示例中,通过`getInfo`函数展示了如何获取一...

    JavaScript各种主流浏览器的调试

    JavaScript各种主流浏览器的调试包括搜狗、谷歌、QQ等(我是搬运工)

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

    在网页开发中,经常需要获取浏览器的可见窗口大小,以便调整布局或执行某些基于视口尺寸的操作。本文将深入探讨如何使用 JavaScript 在不同浏览器中获取页面高度。 首先,我们有两个基本属性可以用来获取页面的宽度...

    JS 获取浏览器参数

    在JavaScript中获取浏览器参数是一项常见的任务,这有助于开发者更好地了解用户环境,以便提供更好的兼容性和个性化体验。这篇博文“JS 获取浏览器参数”可能探讨了如何利用JavaScript来收集关于用户浏览器的信息,...

    js获取客户端字体列表

    使用 JavaScript 获取客户端字体列表是非常有用的,因为 JavaScript 可以在所有浏览器中运行。我们可以使用 JavaScript 创建一个字体下拉菜单,然后使用 JavaScript 获取客户端字体列表。 实现获取客户端字体列表的...

    IE与FF下javascript获取网页及窗口大小的区别详解

    在新定义出来的标准下 document.documentElement.clientHeight在IE和火狐里都能获取正确值,下面一篇文章详细介绍了获取各种浏览器可见窗口大小这方面的差别: [removed]function getInfo(){ var s = “”; s += ...

    js动态的获取浏览器页面放大缩小的比例.pdf

    在这个例子中,监听的是"resize"事件,当用户调整浏览器窗口大小时触发。 2. **设备像素比(devicePixelRatio)**: - `window.devicePixelRatio` 是一个表示设备物理像素与CSS像素之间比例的属性。在大多数现代...

    javascript实现浏览器窗口传递参数

    博文链接:https://zhanglingsi.iteye.com/blog/243677

    browser-size:获取浏览器的窗口大小并限制调整大小事件

    浏览器大小 获取浏览器的窗口大小和限制的调整大小事件。安装npm install browser-size --save用法创建一个新的浏览器大小实例并添加一个监听器 var browser = require ( 'browser-size' ) ( )browser . on ( '...

    javascript实现获取浏览器版本、浏览器类型

    本文主要讨论了如何使用JavaScript代码获取浏览器的类型和版本信息。在Web开发中,获取用户浏览器的相关信息是非常有用的,它可以帮助开发者判断用户的浏览环境,并根据不同的浏览器提供更合适的网页内容或进行功能...

Global site tag (gtag.js) - Google Analytics