JS教程:lightbox源码解析


lightbox源码解析

function getPageScroll(){

var yScroll;

if (self.pageYOffset) {
yScroll = self.pageYOffset; //NS
} else if (document.documentElement && document.documentElement.scrollTop){ // Explorer 6 Strict
yScroll = document.documentElement.scrollTop;
} else if (document.body) {// all other Explorers
yScroll = document.body.scrollTop;
}

arrayPageScroll = new Array('',yScroll)
return arrayPageScroll;
}

1. self
打开任何一个网页,浏览器会首先创建一个窗口,这个窗口就是一 个window 对象,也是 js 运行所依附的全局环境对象和全局作用域对象。
self 指窗口本身,它返回的对象 跟window 对象是一模一样的。也正因为如此,window 对象的常用方法和函数都可以用 self 代替 window。

2. 获得窗口的滚动偏移量
* OmniWeb 4.2-, NetFront 3.3- 下无法获得.
* Safari 和 OmniWeb 4.5+ 有 bug,但无影响.

有三种方法获取滚动条的位置。
1. window.pageXOffset/pageYOffset 大多数浏览器,非常可靠
2. document.documentElement.scrollLeft/Top Strict 模式下的 IE6 和其它很少一些浏览器
3. document.body.scrollLeft/Top IE6 和 其它一些浏览器

浏览器在支持 document.body 或者 document.documentElement 的情况下,如果提供了 scrollLeft/Top,那么除了 Safari 和 OmniWeb 4.5+ 外, 这些值都是
很可靠的。在 Safari and OmniWeb 4.5+ 中,当滚动条偏移量为 0 时,会返回 -8,其它情况下正常。当然了,因为它们提供了正确的 window.pageXOffset/pageYOffset,
这个 bug 不会造成什么影响。

function getPageSize(){

//整个页面的大小
var xScroll, yScroll;

if (window.innerHeight && window.scrollMaxY) {
xScroll = document.body.scrollWidth;
yScroll = window.innerHeight + window.scrollMaxY;
} else if (document.body.scrollHeight > document.body.offsetHeight){ // all but Explorer Mac
xScroll = document.body.scrollWidth;
yScroll = document.body.scrollHeight;
} else { // Explorer Mac...would also work in Explorer 6 Strict, Mozilla and Safari
xScroll = document.body.offsetWidth;
yScroll = document.body.offsetHeight;
}

//可见窗口(view port)的大小
var windowWidth, windowHeight;
if (self.innerHeight) { // all except Explorer
windowWidth = self.innerWidth;
windowHeight = self.innerHeight;
} else if (document.documentElement && document.documentElement.clientHeight) { // Explorer 6 Strict Mode
windowWidth = document.documentElement.clientWidth;
windowHeight = document.documentElement.clientHeight;
} else if (document.body) { // other Explorers
windowWidth = document.body.clientWidth;
windowHeight = document.body.clientHeight;
}

// for small pages with total height less then height of the viewport
if(yScroll < windowHeight){
pageHeight = windowHeight;
} else {
pageHeight = yScroll;
}

// for small pages with total width less then width of the viewport
if(xScroll < windowWidth){
pageWidth = windowWidth;
} else {
pageWidth = xScroll;
}


arrayPageSize = new Array(pageWidth,pageHeight,windowWidth,windowHeight)
return arrayPageSize;
}

文档加载完之前是无法获取窗口大小值的,而且还要对不同浏览器使用不同的方法。可用参数如下:
1. window.innerHeight/Width IE 除外的大多数浏览器
2. document.body.clientHeight/Width 包括 IE 在内的大多数浏览器
3. document.documentElement.clientHeight/Width 包括 IE 在内的大多 DOM 浏览器

关于 clientHeight/Width 会有点乱,因为在不同浏览器下,甚至在同一个浏览器下 clientHeight/Width 都可能不同,要看文档类型激发的是浏览器的
strict 模式还是 quirks 模式。有时,它们指的是窗口的尺寸,有时是文档内容的尺寸。下表展示了不同浏览器、不同模式中的属性:

Properties and what they relate to
Browser window.
innerHeight
document.
body.
clientHeight
document.
documentElement.
clientHeight
Opera 9.5+ strict window document window
Opera 9.5+ quirks window window document
Opera 7-9.2 window window document
Opera 6 window window N/A
Mozilla strict window document window
Mozilla quirks window window document
KHTML window document document
Safari window document document
iCab 3 window document document
iCab 2 window window N/A
IE 6+ strict N/A document window
IE 5-7 quirks N/A window 0
IE 4 N/A window N/A
ICEbrowser window window document
Tkhtml Hv3 window window document
Netscape 4 window N/A N/A

如上所示,好歹还是有个值是确定的:innerHeight,不过 IE 却不支持这个属性。目前,几乎所有的浏览器都支持使用 window.innerHeight/Width 属性。

算法逻辑:
1. 如果存在 window.innerHeight/Width 属性, 是可以完全信赖的, 使用 window.innerHeight/Width 就可以了.
2. 否则如果存在 document.documentElement.clientHeight/Width 属性且值大于 0,就用 document.documentElement.clientHeight/Width.
3. 否则就用 document.body.clientHeight/Width.

此算法在 IE6+ “standards compliant mode” 下,当窗口所谓 0px × 0px 大小时,失效。


« 
» 
快速导航

Copyright © 2016 phpStudy | 豫ICP备2021030365号-3