日期:2014-05-16 浏览次数:20524 次
获取窗口、屏幕和浏览器信息: Window 、 Screen 、 Navigator 对象。
?
?
对于 IE 浏览器,有如下只读属性:
//浏览器窗口大小
var windowWidth = window.outerWidth;
var windowHeight = window.outerHeight;
//浏览器窗口在桌面的位置
var windowX = window.screenX;
var windowY = window.screenY;
//html内容展现区域大小=浏览器窗口大小-工具栏-滚动栏-菜单栏
var viewportWidth = window.innerWidth;
var viewportHeight = window.innerHeight;
//滚动条的位置
var horizontalScroll = window.pageXOffset;
var verticalScroll = window.PageYOffset;
alert('windowWidth = ' + windowWidth + ', ' +
'windowHeight = ' + windowHeight + ', ' +
'windowX = ' + windowX + ', ' +
'windowY = ' + windowY + ', ' +
'viewportWidth = ' + viewportWidth + ', ' +
'viewportHeight = ' + viewportHeight + ', ' +
'horizontalScroll = ' + horizontalScroll + ', '+
'verticalScroll = ' + verticalScroll
);
?
?
屏幕坐标:桌面上的一个浏览器的位置,相对于桌面的左上角来度量;
窗口坐标:在 web 浏览器中的视口的位置,相对于视口的左上角来度量;
文档坐标:一个 html 文档中的位置,相对于文档的左上角来度量;
var Geometry = {};
if (window.srceenLeft) { //IE浏览器
Geometry.getWindowX = function() { return window.screenLeft; };
Geometry.getWindowY = function() { return window.screenTop; };
}
else if (window.screenX) { //Firfox
Geometry.getWindowX = function() { return window.ScreenX; };
Geometry.getWindowY = function() { return window.screenY; };
}
if (window.innerWidth) { //除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) {
//IE6在用 <!DOCTYPE> 申明时,属性放置在document.documentElement元素上,而不是document.body元素上
Geometry.getViewportWidth = function() { return document.documentElement.clientWidth; };
Geometry.getViewportHeight = fucntion() { return document.documentElement.clientHeight; };
Geometry.getHorizontalScroll = fucntion() { return document.documentElement.ScrollLeft; };
Geometry.getVerticalScroll = fucntion() { return document.documentElement.ScrollTop; };
}
else if (document.body.clientWidth) {
//IE4, IE5, IE6没有<!DCOTYPE>申明
Geometry.getViewportWidth = fucntion() { return document.body.clientWidht; };
Geometry.getViewportHeight = fucntion() { return docuemnt.body.clientHeight; };
Geometry.getHorizontalScroll = function() { return docuemnt.body.scrollLeft; };
Geometry.getVerticalScroll = fucntion() { return docuemnt.body.scrollTop; };
}
//返回文档的大小
if (document.documentElement && document.documentElement.scrollWidth) {
Geometry.getDocumentWidth = fucntion() { return document.documentElement.scrollWidth; };
Geometry.getDocumentHeight = fucntion() { return document.documentElement.scrollHeight; };
}
else if (document.body.scrollWidth) {
Geometry.getDocumentWidth = fucntion() { return document.body.scrollWidth; };
Geometry.getDocumentHeight = fucntion() { return document.body.scrollHeight; };
}
?
?
Screen 对象: Wndow 对象的 screen 属性引用 Screen 对象,这个 Screen 对象提供有关用户显示大小和可用的颜色数量的信息。
属性 width 和 height 指定的是以像素为单位的显示器大小,属性 availWidth 和 availHeight 指定的