关于获取各种浏览器可见窗口大小的一点点研究
<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高）
真是一件麻烦事情，其实就开发来看，宁可少一些对象和方法，不使用最新的标准要方便许多啊。
分享到：
相关推荐
本文将深入探讨如何使用 JavaScript 在不同浏览器中获取页面高度。 首先，我们有两个基本属性可以用来获取页面的宽度和高度：`document.body.clientWidth` 和 `document.body.clientHeight`。这两个属性分别返回 `...
通过上述介绍，我们可以看到JavaScript提供了多种方式来获取浏览器显示区域的大小信息。开发者可以根据具体需求选择合适的方法，并注意处理不同浏览器之间的兼容性问题，从而实现更加灵活和响应式的网页布局。
最后，考虑到页面内容可能小于视口高度，函数会根据实际情况返回页面高度或视口高度。 2. **getWidth() 函数**：与 `getHeight()` 类似，这个函数用于获取当前页面可视区域的宽度。它首先检查 `window.innerWidth` ...
### 解决多种浏览器获取滚动条高度 在网页开发过程中，我们经常会遇到与浏览器兼容性相关的问题，尤其是在处理页面滚动相关的功能时。不同的浏览器对于某些属性的实现方式可能存在差异，这就要求开发者能够编写出...
### iframe自适应高度(兼容多种浏览器) 在网页开发过程中，`iframe`是一种常用的元素，用于在当前页面中嵌入另一个HTML文档。然而，默认情况下，`iframe`的高度是固定的，这可能会导致内容显示不完全或者出现不必要...
通过上述介绍，我们了解了如何使用JavaScript获取当前页面可视区域的高度和宽度，以及浏览器窗口的宽度和高度。这些基本的尺寸信息是进行前端开发不可或缺的一部分，掌握了这些技能，可以更好地进行页面布局和响应式...
类似地，获取页面高度也可以采用类似的方法。 总之，JavaScript提供了多种方法来获取网页的高度、宽度和滚动位置，但需要注意的是，由于浏览器之间的差异，需要编写兼容性代码以确保在所有环境中都能正常运行。...
在 Opera 中，`document.documentElement.clientWidth` 可以获取页面临象的宽度，`document.documentElement.clientHeight` 可以获取页面临象的高度。 3. 使用 `window` 对象： `window.screenTop` 可以获取网页...
这种技术通常涉及到JavaScript，通过监听`iframe`的`load`事件，然后获取`iframe`内的文档高度，并设置到`iframe`的`height`属性上。 以下是一个基本的实现思路： 1. 创建`iframe`元素，并设置其初始高度，例如一...
JavaScript作为一种广泛应用于网页编程的语言，提供了多种方法来获取屏幕的高度、宽度以及其他相关信息。以下将深入探讨如何使用JavaScript来获取屏幕尺寸和其他关键信息。 ### 一、获取屏幕尺寸 #### 1.1 使用`...
本文将详细介绍如何在多种浏览器环境下，包括IE、Firefox和Chrome等，获取浏览器的宽度和高度。 首先，我们来看IE浏览器中的方法： 1. `document.body.clientWidth`：返回BODY元素的宽度，不包括滚动条和边框。 2....
总结，JavaScript获取网页高度和宽度的方法多种多样，可以根据具体需求选择合适的方式。了解这些知识对于提升网页交互体验和实现动态布局至关重要。在教育领域，理解并熟练掌握这些技术可以帮助学生更好地构建动态、...
以下将详细介绍如何通过JavaScript获取这些信息，并探讨不同浏览器间可能存在的差异。 首先，我们可以使用`window.innerWidth`和`window.innerHeight`来获取浏览器窗口的总宽度和高度，包括工具栏和其他用户界面...
获取页面对象的宽度和高度（Opera 特有） - **`document.documentElement.clientWidth`**: 返回页面对象宽度（即 BODY 对象宽度加上 Margin 宽度）。 - **`document.documentElement.clientHeight`**: 返回页面...
此外，需要注意的是，随着Web技术的发展，用户设备的多样性也日益增加，因此在使用JavaScript获取尺寸信息时，除了使用文档对象模型（DOM）属性和方法之外，还可能需要依赖于CSSOM（CSS对象模型）和HTML元素的实时...
- 获取页面总高度：通过JavaScript执行`document.body.scrollHeight`获取。 - 分块截图：设置一个滚动条位置，截取当前可见区域，然后滚动页面，重复此过程，直到覆盖整个页面。 - 合并图片：将所有截图按顺序...
- 对于更复杂的情况，如需要兼容多种浏览器的不同版本，可以编写封装函数来统一处理这些差异。 总之，在前端开发中，了解并掌握不同浏览器之间的差异对于编写高质量的、兼容性强的代码至关重要。希望本文的内容能够...
JavaScript浏览器对象模型（BOM，Browser Object Model）是JavaScript在Web开发中用于操作浏览器特性的核心部分。它不依赖于HTML文档对象模型（DOM），而是提供了与浏览器交互的一系列对象，如Window、Navigator、...
JavaScript获取鼠标坐标是Web开发中的常见需求，尤其在交互式应用和动态效果中扮演着重要角色。本篇文章将详细介绍各种JavaScript方法来获取鼠标位置，并解释它们的用途和差异。 首先，我们可以使用`event`对象来...