2020/6/10 JavaScript高階程式設計 BOM
BOM(瀏覽器物件模型):提供用於訪問瀏覽器的物件。
8.1 window物件
window是BOM的核心物件,表示瀏覽器的一個例項。
- JavaScript訪問瀏覽器視窗的介面
- ECMAScript規定的Global物件
8.1.1 全域性作用域
全域性變數會成為window的屬性,但是定義全域性變數和直接在window物件上定義屬性是有差別的——全域性變數不能通過delete刪除,但window物件上定義的可以。
這是因為使用var新增的window屬性[[Configurable]]被設定為false(不可刪除)。
訪問未宣告的變數會發生錯誤,但通過查詢window物件,可以知道某個可能未宣告的變數是否存在。
//這裡會丟擲錯誤,因為oldValue未定義 var newValue = oldValue; //這裡不會丟擲錯誤,因為這是一次屬性查詢 var newValue = window.oldValue; //newValue的值是undefined
8.1.2 視窗關係及框架
如果頁面中包含框架,則每個框架都擁有自己的window物件,並儲存在frames集合中。在frames集合中可以通過數值索引/框架名稱來訪問相應的window物件。每個window物件都有一個name屬性,其中包含框架的名稱。
PS1:對於最高層視窗來說:除非最高層視窗是通過window.open()開啟的,否則其window物件的name屬性不會包含任何值。
與框架有關的window物件屬性(同時也是物件):
- top:始終指向最高(最外)層的框架,也就是瀏覽器視窗。使用它可以正確地在一個框架中訪問另一個框架。因為對任意一個框架中的程式碼來說,window物件指向的都是那個框架的特定例項,而非最高層框架。
- parent:始終指向當前框架的直接上層框架。在沒有框架的情況下,parent等於top。
- self:始終指向window。引入self的目的僅僅是為了和top和parent物件對應,因此他不包含其他值。
8.1.3 視窗位置
用來確定window物件位置的屬性:screenLeft, screenTop / screenX, screenY,分別表示視窗相對於螢幕左邊和上邊的位置。
兩組方法分別支援的瀏覽器:
screenLeft, screenTop | IE、Safari、Opera、Chrome |
screenX, screenY | Firefox、Safari、Chrome |
跨瀏覽器取得視窗位置的程式碼:
var leftPos = (typeof window.screenLeft == "number") ? window.screenLeft : window.screenX; var topPos = (typeof window.screenTop == "number") ? window.screenTop : window.screenY;
缺點:
- screenTop表示的是由從螢幕上邊到window物件表示的頁面可見區域的距離(即頁面可見區域上方瀏覽器工具欄的畫素高度)。
- screenY表示整個瀏覽器視窗相對於螢幕的座標值(0)。
將視窗精確移動到一個新位置的方法:
- moveTo():接收最新位置的x,y座標值。
- moveBy():接收在水平和垂直方向上移動的畫素數。
PS:這兩個方法很可能會被瀏覽器禁用(Opera和IE7+),且不適合框架,只能對最外層window物件使用。
8.1.4 視窗大小
IE9+、Safari、Firefox | Opera | Chrome | |
innerWidth、innerHeight | 檢視區大小 | 該容器中頁面檢視區的大小(減去邊框寬度) | 視口大小 |
outerWidth、outerHeight | 瀏覽器視窗本身的尺寸 | 頁面檢視容器的大小(單個標籤頁對應瀏覽器視窗的大小) | 視口大小 |
document.documentElement.clientWidth / document.documentElement.clientHeight:儲存了頁面視口的資訊。
resizeTo()和resizeBy():調整瀏覽器視窗的大小。(分別接收新寬度高度和新視窗與原視窗的寬度和高度之差,同樣可能被瀏覽器禁用)
8.1.5 導航和開啟視窗
&n