Javascript 窗口的几何关系和相关方法、属性

robinqu

浏览: 88678 次
性别:
来自: 武汉

最近访客更多访客>>

hypocrite.T

kathy919

ahyouyou

ztcwh

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

javascript

JavaScript IE 浏览器 Firefox Web

Window Geometry
窗口几何关系

引用

Screen coordinates describe the position of a browser window on the desktop; they are measured relative to the upper-left corner of the desktop.

Screen坐标系是描述浏览器窗口和桌面之间的几何关系的，其坐标是相对于桌面左上角的。

引用

Window coordinates describe a position within the web browser's viewport; they are measured relative to the upper-left corner of the viewport.

Window坐标系描述了浏览器页面可视区域的几何关系，其坐标是相对于可视区域的左上角。

引用

Document coordinates describe a position within an HTML document; they are measured relative to the upper-left corner of the document. When the document is longer or wider than the viewport (as web pages often are), document coordinates and window coordinates are not the same, and you'll need to take the position of the scrollbars into account when converting between these two coordinate systems.

Document坐标系描述了HTML元素与document文档的几何关系，其坐标是相对于document对象的左上角的。
当document足够长而产生滚动条，document坐标系和window坐标系就会产生差异，两个坐标系之间就要考虑转换的方法。

引用

For some reason, IE places these window geometry properties on the <body> of the HTML document. And, further confusing matters, IE 6, when displaying a document with a <!DOCTYPE> declaration, places the properties on the document.documentElement element instead of document.body.

IE在默认状态下将这些相关属性放在document.body下，但如果有<!DOCTYPE>声明，那么就会放在document.documentElement下。

浏览器	window对象坐标大小	可视区域大小	滚动条	document对象坐标大小
FF	screenX/Y	innerWidth/Height	pageXOffset/YOffset	documentElement.scrollLeft/Top
IE with doctype	screenLeft/Top	documentElement.clientWidth	documentElement.scrollLeft/Top/Height	documentElement.scrollLeft/Top

以下是一个获取几何参数的函数

/**
 * Geometry.js: portable functions for querying window and document geometry
 *
 * This module defines functions for querying window and document geometry.
 *
 * getWindowX/Y( ): return the position of the window on the screen
 * getViewportWidth/Height( ): return the size of the browser viewport area
 * getDocumentWidth/Height( ): return the size of the document
 * getHorizontalScroll( ): return the position of the horizontal scrollbar
 * getVerticalScroll( ): return the position of the vertical scrollbar
 *
 * Note that there is no portable way to query the overall size of the
 * browser window, so there are no getWindowWidth/Height( ) functions.
 *
 * IMPORTANT: This module must be included in the <body> of a document
 *            instead of the <head> of the document.
 */
var Geometry = {};

if (window.screenLeft) { // IE and others
    Geometry.getWindowX = function( ) { return window.screenLeft; };
    Geometry.getWindowY = function( ) { return window.screenTop; };
}
else if (window.screenX) { // Firefox and others
    Geometry.getWindowX = function( ) { return window.screenX; };
    Geometry.getWindowY = function( ) { return window.screenY; };
}

if (window.innerWidth) { // All browsers but IE
    Geometry.getViewportWidth = function( ) { return window.innerWidth; };
    Geometry.getViewportHeight = function( ) { return window.innerHeight; };
    Geometry.getHorizontalScroll = function( ) { return window.pageXOffset; };
    Geometry.getVerticalScroll = function( ) { return window.pageYOffset; };
}
else if (document.documentElement && document.documentElement.clientWidth) {
    // These functions are for IE 6 when there is a DOCTYPE
    Geometry.getViewportWidth =
        function( ) { return document.documentElement.clientWidth; };
    Geometry.getViewportHeight =
        function( ) { return document.documentElement.clientHeight; };
    Geometry.getHorizontalScroll =
        function( ) { return document.documentElement.scrollLeft; };
    Geometry.getVerticalScroll =
        function( ) { return document.documentElement.scrollTop; };
}
else if (document.body.clientWidth) {
    // These are for IE4, IE5, and IE6 without a DOCTYPE
    Geometry.getViewportWidth =
        function( ) { return document.body.clientWidth; };
    Geometry.getViewportHeight =
        function( ) { return document.body.clientHeight; };
    Geometry.getHorizontalScroll =
        function( ) { return document.body.scrollLeft; };
    Geometry.getVerticalScroll =
        function( ) { return document.body.scrollTop; };
}

// These functions return the size of the document. They are not window
// related, but they are useful to have here anyway.
if (document.documentElement && document.documentElemnet.scrollWidth) {
    Geometry.getDocumentWidth =
        function( ) { return document.documentElement.scrollWidth; };
    Geometry.getDocumentHeight =
        function( ) { return document.documentElement.scrollHeight; };
}
else if (document.body.scrollWidth) {
    Geometry.getDocumentWidth =
        function( ) { return document.body.scrollWidth; };
    Geometry.getDocumentHeight =
        function( ) { return document.body.scrollHeight; };
}

分享到：

Javascript Document编程 | JavaScript window下面的常用函数、属性

2009-09-02 10:47
浏览 1109
评论(0)
查看更多

发表评论

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

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论