本文源为:
http://developer.51cto.com/art/200805/72909.htm
关于获取各种浏览器可见窗口大小的一点点研究。
在我本地测试当中:
在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的标准在作怪啊
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`对象来...