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

女爷i 2022-02-05 01:51 243阅读 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则会给出框架相对于屏幕边缘的精确坐标值。

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

> moveTo()和moveBy()方法倒是有可能将窗口精确地移动到一个新位置。  
> 这两个方法都接收两个参数，其中moveTo()接收的是新位置的x和y坐标值，而moveBy()接收的是在水平和垂直方向上移动的像素数。

but，需要注意：**这两个方法可能会被浏览器禁用；而且，在Opera和IE7及更高的版本中默认是禁用的。另外，这两个方法都不适合框架，只能对最外层的window对象使用。**

--------------------

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

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