maoting

浏览: 45622 次
性别:
来自: 北京

最近访客更多访客>>

iy2017

eyeti123

小动物不困

吴小帅啊

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

BOM

博客分类：

javascript

BOM

窗口位置

screenLeft(screenX)、screenTop(screenY)分别用于表示窗口相对于屏幕左边和上边的位置.

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8" /> 
<title>CSS z-index Property</title> 
<script type = "text/javascript">
window.onload = function(){
	//FF只支持screenX和screenY
	//IE支持screenLeft和screenTop
	//Safari 和Chrome同时支持以上两个属性。虽然Opera同时支持以上两个属性，但是二者意义不相同。建议不要在Opera中使用
	var leftPos = (typeof window.screenLeft == "number")?window.screenLeft:window.screenX;
	var topPos = (typeof window.screenTop == "number")?window.screenTop:window.screenY;
	console.log("leftPos:"+leftPos);
	console.log("topPos:"+topPos);
	//全屏时运行结果：FireFox、Chrome、Safari都是-4 -4，
	//而IE中leftPos:0，topPos的值根据工具栏高度不同，值发生变化。
}
</script>
</head> 
<body>
	testPositon
</body>

</html>

窗口大小（浏览器视图区的大小，即减去减去边框的大小）

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8" /> 
<title>BOM</title> 
<script type = "text/javascript">
window.onload = function(){
	/*浏览器视图区的大小（减去边框宽度）*/
	//Firefox Safari Chrome
	var pageWidth = window.innerWidth,
		pageHeight = window.innerHeight;
	
	//IE
	if(typeof pageWidth != "number"){
		if(document.compatMode == "CSS1Compat"){
			//标准模式
			pageWidth = document.documentElement.clientWidth;
			pageHeight = document.documentElement.clientHeight;
		}else{
			//混杂模式
			pageWidth = document.body.clientWidth;
			pageHeight = document.body.clientHeight;
		}
	}
}
</script>
</head> 
<body>
	testPositon
</body>

</html>

window.moveBy(0,100);
	window.moveTo(200,300);
	window.resizeTo(100,100);
	window.resizeBy(200,300);

以上四个方法在某些浏览器中被禁用

location对象以下是所有属性(可读写)：

注意以下两端代码中search和hash输出值的不同

<script type="text/javascript">
window.onload = function(){
	//search:?name=maoting
	//hash:#aia_test
	location.href = "http://127.0.0.1:8020/frameset/location/subfameLeft.html?name=maoting#aia_test";
	for(var a in location){
		console.log(a);
		console.log(location[a]);
	}
}

<script type="text/javascript">
window.onload = function(){
	//search:
	//hash:#aia_test?name=maoting
	location.href = "http://127.0.0.1:8020/frameset/location/subfameLeft.html#aia_test?name=maoting";
	for(var a in location){
		console.log(a);
		console.log(location[a]);
	}
}
</script>

使用location对象可以通过很多方式来改变浏览器的位置。

location.assign("http://www.wrox.com");
//或者
location.href="http://www.wrox.com";
//或者
window.location="http://www.wrox.com";

重新加载页面

location.reload()//重新加载(有可能从缓存中加载)
location.reload(true)//(从服务器中重新加载)

navigator对象

它的属性通常用于检测显示页面的浏览器类型，常用属性有userAgent（浏览器的用户代理字符串）等

screen对象

包含有关客户端显示屏幕的信息。常用属性:

availHeight：返回显示屏幕的高度 (除 Windows 任务栏之外)。

availWidth：返回显示屏幕的宽度 (除 Windows 任务栏之外)。

查看图片附件

分享到：

innerText、outerText、innerHTML、oute ... | Width and Height

2012-10-27 09:32
浏览 739
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

BOM

BOM

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

BOM

BOM

评论

发表评论

相关推荐

es6

immutable

react

redux

angular遇到的问题

http2

iconfont的蜕化操作

flux

setTransform

遇到的问题

node安装（windows）

jQuery.Callbacks之demo

使用proxy改变js上下文

num

js插件模板

jquery中的this

SeaJS与RequireJS最大的区别

快速排序

autocomplete/suggest

typeof

最近访客更多访客>>