JavaScript的BOM之window对象----窗口位置（三）

最新推荐文章于 2022-10-03 21:42:57 发布

shangrila-xiu

最新推荐文章于 2022-10-03 21:42:57 发布

阅读量537

点赞数

分类专栏： js 文章标签： JavaScript的BOM之window对象----窗口位置（三）

本文链接：https://blog.csdn.net/lyx9611/article/details/89812571

版权

js 专栏收录该内容

91 篇文章 0 订阅

订阅专栏

窗口位置

用来确定和修改window对象的为主的属性和方法有很多。

1、IE、Safari、Opera和Chrome都提供了screenLeft、screenTop属性，分别用于表示窗口相对于屏幕的左边和上边的位置。
2、Firefox则在screenX和screenY属性中提供相同窗口位置信息。（歧义）
3、 Safari和Chrome也同样支持这两个属性：screenX和screenY属性。
4、Opera虽然也支持screeX和screenY，但与screenLeft、screenTop属性并不相对应。因此建议不要使用Opera中使用screeX和screenY。

//下面的测试是在谷歌浏览器 73 中
<script>
		var leftPos = (typeof window.screenLeft == "number") ? window.screenLeft : window.screenX;
		var topPos = (typeof window.screenTop == "number") ? window.screenTop : window.screenY;
		alert("获取窗口左边"+leftPos);//0
		alert("获取窗口上边的位置"+topPos);//0
		console.log(window.screenLeft);//0
		console.log(window.screenX);//0
		console.log(window.screenTop);//0
		console.log(window.screenY);//0
	</script>

//在IE 11 浏览器中：
<script>
		var leftPos = (typeof window.screenLeft == "number") ? window.screenLeft : window.screenX;
		var topPos = (typeof window.screenTop == "number") ? window.screenTop : window.screenY;
		alert("获取窗口左边"+leftPos);//0，相当于：window.screenLeft
		alert("获取窗口上边的位置"+topPos);//75，相当于：window.screenTop
		console.log(window.screenLeft);//0
		console.log(window.screenX);//-4
		console.log(window.screenTop);//75
		console.log(window.screenY);//-4
	</script>

//在火狐浏览器中：66.0.3
<script>
		var leftPos = (typeof window.screenLeft == "number") ? window.screenLeft : window.screenX;
		var topPos = (typeof window.screenTop == "number") ? window.screenTop : window.screenY;
		alert("获取窗口左边"+leftPos);//-4
		alert("获取窗口上边的位置"+topPos);//-4
		console.log(window.screenLeft);//-4
		console.log(window.screenX);//-4
		console.log(window.screenTop);//-4
		console.log(window.screenY);//-4
	</script>

上面的代码中使用二元操作符，首先确定screenLeft 、screenTop 是否存在。如果是在IE、Safari、Opera、Chrome，则取得这两个属性值。如果不存在（Firefox），则screenY和screenX的值。

注意：下面的这个问题，学宝们要是有答案，欢迎在下方评论！！谢谢

为什么我在火狐浏览器中访问的时候，screenLeft和screenTop的值也都是获取得到-4呢？上面我已经说了这句话：Firefox则在screenX和screenY属性中提供相同窗口位置信息。

学宝们要是有答案，欢迎在下方评论！！谢谢

注意：
在IE、Opera中：screenLeft和screenTop保存的是从屏幕左边和上边到由window对象表示的页面可见区域的距离。 that is to say,如果window对象是最外层的对象，而且浏览器窗口紧贴屏幕最上端----即y轴坐标为0，那么screenTop的值就是位于页面可见区域上方的浏览器工具栏的像素高度。
在Chrome、Firefox和Safari中，screenY或screenTop中保存的是整个浏览器窗口相对于屏幕的坐标值，即在窗口的y轴坐标为0返回0。

更让人捉摸不透的是：

FireFox、Safari和Chrome始终返回页面中每个框架的top.screenX和top.screenY值。即使在页面由于设置了外边距而发生了偏移，相对于window对象使用screenX和screenY每次也都会返回相同的值。
而IE、Opera则会给出框架相对于屏幕边缘的精确坐标值。

最终结果，就是无法在跨浏览器的时候准确得到窗口左边和窗口上边的位置精确坐标值。
解决方法：