javascript position兼容性随笔

一、Javascript源码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
if (!window.jasen.core.Position) {
    window.jasen.core.Position = {};
}
 
function Size(width, height) {
    this.width = parseFloat(width);
    this.height = parseFloat(height);
}
 
Size.prototype.toString = function () {
    return "width=" + this.width + ";height=" + this.height;
}
 
function Point(x, y) {
    this.x = parseFloat(x);
    this.y = parseFloat(y);
}
 
Point.prototype.toString = function () {
    return "x=" + this.x + ";y=" + this.y;
}
 
// 获取窗口的左上角的偏移量(相对屏幕)
function getScreenOffset() {
    if (window.screenLeft) {
        return new Point(window.screenLeft, window.screenTop);
    }
    else if (window.screenX) { // Firefox
        return new Point(window.screenX, window.screenY);
    }
 
    return new Point(0, 0);
}
 
// 获取屏幕的大小
function getScreenSize() {
    return new Size(window.screen.width, window.screen.height);
}
 
// 获取窗口中的文档显示区的大小
function getVisibleSize() {
    if (window.innerWidth) {
        return new Size(window.innerWidth, window.innerHeight);
    }
    else if (document.documentElement && document.documentElement.clientWidth) {
        return new Size(document.documentElement.clientWidth, document.documentElement.clientHeight);
    }
    else if (document.body && document.body.clientWidth) {
        return new Size(document.body.clientWidth, document.body.clientHeight);
    }
 
    return new Size(0, 0);
}
 
// 获取窗口中的文档的偏移量(滚动条的值)
function getPageOffset() {
    if (window.pageXOffset) {
        return new Point(window.pageXOffset, window.pageYOffset);
    }
    else if (document.documentElement && document.documentElement.scrollLeft) {
        return new Point(document.documentElement.scrollLeft, document.documentElement.scrollTop);
    }
    else if (document.body && document.body.scrollLeft) {
        return new Point(document.body.scrollLeft, document.body.scrollTop);
    }
 
    return new Point(0, 0);
}
 
var position = window.Position = window.jasen.core.Position;
position.getScreenOffset = getScreenOffset;
position.getScreenOffsetX = function () { return getScreenOffset().x; };
position.getScreenOffsetY = function () { return getScreenOffset().y; };
position.getScreenSize = getScreenSize;
position.getScreenWidth = function () { return getScreenSize().width; };
position.getScreenHeight = function () { return getScreenSize().height; };
position.getVisibleSize = getVisibleSize;
position.getVisibleWidth = function () { return getVisibleSize().width; };
position.getVisibleHeight = function () { return getVisibleSize().height; };
position.getPageOffset = getPageOffset;
position.getPageOffsetX = function () { return getPageOffset().x; };
position.getPageOffsetY = function () { return getPageOffset().y; };

 

 二、范例

    <script type="text/javascript">
        document.body.onclick = function () {
            alert(window.Position.getVisibleSize());
            alert(window.Position.getPageOffset());
        }
    </script>

 

posted @   jasen.kin  阅读(1512)  评论(1编辑  收藏  举报
编辑推荐:
· Linux系列:如何用 C#调用 C方法造成内存泄露
· AI与.NET技术实操系列(二):开始使用ML.NET
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
· 理解Rust引用及其生命周期标识(上)
阅读排行:
· 物流快递公司核心技术能力-地址解析分单基础技术分享
· .NET 10首个预览版发布:重大改进与新特性概览!
· 单线程的Redis速度为什么快?
· 展开说说关于C#中ORM框架的用法!
· Pantheons:用 TypeScript 打造主流大模型对话的一站式集成库
点击右上角即可分享
微信分享提示