日期:2014-05-16 浏览次数:20427 次
获取窗口、屏幕和浏览器信息: 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 指定的