- 1.窗口關系及框架
- 2.瀏覽器窗口位置
- 3.窗口大小
- 4.視口大小
- 5.元素（組件）大小和偏移量
- 6.客戶區大小
- 7.元素滾動區域大小
- 8. getBoundingClientRect()
- 9. 鼠標點擊事件的位置
1.窗口關系及框架
<!DOCTYPE html>
<head>
<title>Frameset Example</title>
</head>
<frameset rows="160,*">
<frame src="topframe.html" name="topFrame">
<frameset cols="50%,50%">
<frame src="leftframe.html" name="leftFrame">
<frame src="leftframe.html" name="rightFrame">
</frameset>
</frameset>
</html>
每個框架都擁有自己的window對象，並且保存在frames集合中可以通過數值索引(從0開始，從左至右，從上到下)或者框架名稱來訪問相應的window對象。top對象始終指向最高(最外)層的框架，也就是瀏覽器窗口。

parent(父)對象始終指向當前框架的直接上層框架，每個框架都有自己的window對象，不共享構造函數，同域父子可以相互訪問屬性和方法
最外層瀏覽器窗口有如下腳本
var selfArr = ['I','am','Top','frame'];
window.onload = function () {
var topArr = window.frames[0].topArr;
console.log(selfArr instanceof Array);
console.log(topArr instanceof Array);
console.log(Array.isArray(topArr));
}
topFrame有如下腳本
var topArr = [1,2,3,4,5];
window.onload = function () {
console.log(parent.selfArr);
}
執行結果

1、frame不能脫離frameset單獨使用，iframe可以；
2、frame不能放在body中；
3、frame的高度只能通過frameSet控制；iframe可以自己控制，不能通過frameset控制
2.瀏覽器窗口位置
窗口位置：窗口相對於屏幕左邊和上邊的位置
screenLeft和screenTop屬性：IE、Safari、Opera、Chrome
screenX和screenY屬性：Firefox、Safari、Chrome
在IE、Opera中，screenLeft和screenTop中保存 的是從屏幕左邊和上邊到由window對象表示的頁面可見區域的距離
在Chrome、Firefox和Safari中，screenY或screenTop中保存的是整個瀏覽器窗口相對於屏幕的坐標值，即在窗口的y軸坐標為0時返回0。
var leftPos = (typeof window.screenLeft === 'number') ? window.screenLeft : window.screenX;
var rightPos = (typeof window.screenTop === 'number') ? window.screenTop : window.screenY;
3.窗口大小
IE9+、Firefox、Safari、Opera 和Chrome 提供了4個屬性：outerWidth和outerHeight&&innerWidth和innerHeight
紅寶書《JavaScript高級程序設計》上對這幾個屬性的描述如下：
在 IE9+、 Safari 和 Firefox、Opera中， outerWidth 和outerHeight 返回瀏覽器窗口本身的尺寸，而 innerWidth 和 innerHeight則表示該容器中頁面視圖區的大小(減去邊框寬
度)。在 Chrome中相應寬高返回相同的值，即視 口( viewport)大小而非瀏覽器窗口大小。
隨手在windows上的Chrome上測試了一下，發現在並不如書中所述，並且在窗口處於最大化和最小化時表現也不一致，因此這些屬性對於不同系統不同版本的瀏覽器表現可能都不一致，不能作為精確值使用。

