BOM

最新推荐文章于 2025-07-29 18:18:43 发布

maotingmaoting

最新推荐文章于 2025-07-29 18:18:43 发布

阅读量121

点赞数

CC 4.0 BY-SA版权

分类专栏： javascript 文章标签： javascript ViewUI

本文链接：https://blog.youkuaiyun.com/maotingmaoting/article/details/84340435

javascript 专栏收录该内容

11 篇文章

订阅专栏

本文详细介绍了BOM中用于获取窗口位置的screenLeft、screenTop属性，以及如何获取浏览器视图区大小。同时，通过代码示例展示了窗口移动、大小调整和URL操作的基本方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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 任务栏之外)。