看了《JavaScript高級程序設計》(第三版)這本書苞七,決定邊看邊記錄自己的學習隨筆,以加深印象浪藻。前面幾章的等有時間再回頭記錄,現(xiàn)從第八章開始記錄劣摇,不是每一章節(jié)都會有記錄珠移,看自己學習情況。
窗口位置
窗口位置表示窗口相對于屏幕左邊和上邊的位置。
- 在IE钧惧、Safari暇韧、Opera、Chrome瀏覽器中浓瞪,用screenLeft和screenTop屬性來確定和修改window對象的位置懈玻。
- 在Firefox中,用屬性screenX和screenY提供相同的窗口位置信息乾颁,Safari涂乌、Chrome也同時支持這兩個屬性。Opera也支持英岭,但是screenX和screenY和屬性screenLeft和screenTop并不對應湾盒,一般不再Opera中使用它們。
使用一下代碼可以跨瀏覽器使用:
var leftPos=(typeof window.screenLeft=="number") ? window.screenLeft : window.screenX;
var topPos=(typeof window.screenTop=="number") ? window.screenTop : window.screenY;
如果screenLeft和screenTop屬性存在诅妹,就取得這兩個屬性的值(在IE罚勾、Safari、Opera吭狡、Chrome瀏覽器中)尖殃;若果不存在(在Firefox中),就取得screenX和screenY的值划煮。
在使用這些值時送丰,還要注意一些小問題:
- 在IE、Opera中弛秋,screenLeft和screenTop保存window對象表示的頁面的可見區(qū)域到屏幕左邊和上邊的距離器躏。
- 在Chrome、Safari铐懊、Firefox中邀桑,screenTop和screenY表示整個瀏覽器窗口相對于屏幕的坐標值。
例子:
代碼如下:
<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>
頁面展示如下:
- 在Chrome瀏覽器中(屏幕最大化)科乎,是整個瀏覽器相對于屏幕的位置壁畸,由于瀏覽器最大化,所以位置為(0,0)茅茂。
- 在IE瀏覽器中捏萍,(屏幕最大化),是頁面可見區(qū)域到屏幕的位置空闲,由于瀏覽器最大化令杈,所以位置為(0,119)。