BOM

最新推荐文章于 2024-07-26 11:41:15 发布

maotingmaoting

最新推荐文章于 2024-07-26 11:41:15 发布

阅读量73

点赞数

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

本文链接：https://blog.csdn.net/maotingmaoting/article/details/84340435

版权

javascript 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

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

maotingmaoting

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
BOM

BOM窗口位置screenLeft(screenX)、screenTop(screenY)分别用于表示窗口相对于屏幕左边和上边的位置.&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8" /&gt; &lt;title&gt;CSS z-index Property&lt;..
复制链接

扫一扫

专栏目录