日期:2014-05-16  浏览次数:20427 次

笔记:JS权威指南14章—脚本化浏览器窗口

获取窗口、屏幕和浏览器信息: 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 指定的