JS——窗口位置

看了《JavaScript高级程序设计》(第三版)这本书,决定边看边记录自己的学习随笔,以加深印象。前面几章的等有时间再回头记录,现从第八章开始记录,不是每一章节都会有记录,看自己学习情况。

窗口位置

窗口位置表示窗口相对于屏幕左边和上边的位置。

  • IE、Safari、Opera、Chrome浏览器中,用screenLeftscreenTop属性来确定和修改window对象的位置。
  • Firefox中,用属性screenXscreenY提供相同的窗口位置信息,Safari、Chrome也同时支持这两个属性。Opera也支持,但是screenXscreenY和属性screenLeftscreenTop并不对应,一般不再Opera中使用它们。

使用一下代码可以跨浏览器使用:

var leftPos=(typeof window.screenLeft=="number") ? window.screenLeft : window.screenX;
var topPos=(typeof window.screenTop=="number") ? window.screenTop : window.screenY;

如果screenLeftscreenTop属性存在,就取得这两个属性的值(在IE、Safari、Opera、Chrome浏览器中);若果不存在(在Firefox中),就取得screenXscreenY的值。

在使用这些值时,还要注意一些小问题:

  • IE、Opera中,screenLeftscreenTop保存window对象表示的页面的可见区域到屏幕左边和上边的距离。
  • Chrome、Safari、Firefox中,screenTopscreenY表示整个浏览器窗口相对于屏幕的坐标值。

例子:
代码如下:

<html>
<head>
<script type="text/javascript">
var leftPos=(typeof window.screenLeft=="number") ? window.screenLeft : window.screenX;
var topPos=(typeof window.screenTop=="number") ? window.screenTop : window.screenY;
alert(leftPos+"######"+topPos);
</script>
<style type="text/css">
body{
    padding: 30px;
}
</style>
</head>
<body bgcolor="#ffffff">
<form name="myText">
<input type="text" name="first_text">
<input type="text" name="second_text">
</form>
</body>
</html>

页面展示如下:

  1. Chrome浏览器中(屏幕最大化),是整个浏览器相对于屏幕的位置,由于浏览器最大化,所以位置为(0,0)。
    *Chrome*浏览器页面效果图
  2. IE浏览器中,(屏幕最大化),是页面可见区域到屏幕的位置,由于浏览器最大化,所以位置为(0,119)。
*IE*浏览器页面效果图
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容