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

最新推荐文章于 2022-08-21 18:11:42 发布

QuLong

最新推荐文章于 2022-08-21 18:11:42 发布

阅读量128

点赞数

分类专栏： javascript 文章标签： JavaScript IE 浏览器 Firefox Web ViewUI

本文链接：https://blog.csdn.net/qulong/article/details/83455813

版权

javascript 专栏收录该内容

27 篇文章 0 订阅

订阅专栏

Window Geometry
窗口几何关系

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

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

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

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

[quote]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. [/quote]

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

[quote]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.[/quote]

IE在默认状态下将这些相关属性放在document.body下，但如果有<!DOCTYPE>声明，那么就会放在document.documentElement下。
[table]
|浏览器|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|
[/table]

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

/**
 * 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; };
}

QuLong

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Javascript 窗口的几何关系和相关方法、属性

Window Geometry窗口几何关系[quote]Screen coordinates describe the position of a browser window on the desktop; they are measured relative to the upper-left corner of the desktop. [/quote]Screen坐标系...
复制链接

扫一扫