1. 程式人生 > >JavaScript高階程式設計(讀書筆記)之BOM

JavaScript高階程式設計(讀書筆記)之BOM

BOM(Browser Object Model)提供了很多物件用於訪問瀏覽器的功能,這些功能與任何網頁內容無關。

8.1 window物件
BOM的核心物件是window,它表示一個瀏覽器例項。在瀏覽器中,window物件有雙重角色,window物件既是JavaScript訪問瀏覽器視窗的一個介面,又是ECMAScript規定的Global物件。

8.1.1 全域性作用域
所有在全域性作用域中宣告的變數、函式都會變成window物件的屬性和方法。

全域性變數不能通過delete操作符刪除,而直接在window物件上定義的屬性可以。

嘗試訪問未宣告的變數會丟擲錯誤,但是通過查詢window物件可以知道某個可能未宣告的變數是否存在。

8.1.2 視窗關係及框架
網頁中每個框架都有自己獨立的window物件,並儲存在frames集合中,通過基於0的索引,從做左到右,從上到下或者框架名稱訪問相應的window物件,window.name是框架名稱。

top物件始終指向最外層的框架,也就是瀏覽器視窗

parent物件指向當前框架的直接上層框架。

self物件始終指向window,可以互換使用。
這些屬性都是windw物件的屬性。

8.1.3 視窗位置
Firefox、Safari、Chrome提供了screenX和screenY屬性,IE、Safari、Opera、Chrome提供了screenLeft和screenTop屬性,分別表示視窗相對於螢幕左邊和上邊的位置。

moveTo()接收兩個引數:新位置的x,y座標值;

moveBy()接受兩個引數:水平和垂直方向上移動的畫素數。這兩個方法都不適用於框架,只能對最外層的window物件使用。

8.1.4 視窗大小
outerWidth、outerHeight返回瀏覽器本身的尺寸。
innerWidth、innerHeight返回瀏覽器頁面檢視容器的大小。
chorome中,均返回瀏覽器頁面檢視容器的大小。
IE8及更早版本沒有提供獲取當前瀏覽器視窗尺寸的屬性,可通過DOM獲取。
document.documentElement.clientWidth和document.documentElement.clientHeight儲存了頁面視口的資訊,標準模式下有效。


在混雜模式下,必須通過documnent.body.clientWidth和document.body.clientHeight取得相同資訊。chrome都可以獲取。

resiziTo()和resizeBy()可以調整瀏覽器視窗大小。
resiziTo()接收瀏覽器視窗的新寬度和新高度,resizeBy()接收新視窗與原視窗的寬度與高度之差。

8.1.5 導航與開啟視窗
1 window.open()可以導航到一個特定的URL,也可以開啟一個新的瀏覽器視窗。接收四個引數:

(要載入的URL,視窗目標,一個特性字串,一個表示新頁面是否取代瀏覽器歷史記錄中當前載入頁面的布林值)
通常只傳遞第一個引數,最後一個引數在不開啟新視窗的情況下使用。小學六年級英語第二個引數是已有視窗或框架的名稱。

2 window.open()第三個引數:一個逗號分隔的字串,表示新視窗中都顯示哪些特性。
fullscreen(yes、no)、height(數值)、left、top、width、scrobare(yes、no)等等,以名值對錶示:”height=400,resizeble=yes”。

3 window.open()返回一個指向新視窗的引用。

4 window.close()可以關閉新開啟的視窗,該方法僅適用於通過window.open()開啟的新視窗。

8.1.6 超時呼叫和間歇呼叫
1 間歇呼叫是在指定的時間過後執行程式碼,使用window.setTimeout()方法,接受兩個引數:(要執行的程式碼,執行程式碼前需要等待的毫秒數)。eg:setTimeout(function(){},1000);

在經過指定時間後代碼不一定會執行,因為JavaScript是一個單執行緒序的直譯器,因為一定時間內只能執行一段程式碼,第二個引數告訴JavaScript再經過多少時間把當前任務新增到任務佇列中。方法返回一個數值,表示超時呼叫ID,可以通過呼叫clearTimeout()方法並將相應的超時呼叫ID作為引數傳遞給它,從而取消尚未執行的超時呼叫程式碼。

2 間歇呼叫是指每隔指定的時間就就執行一次程式碼,呼叫方式與超時呼叫一致。使用setInterval(),返回一個間歇呼叫ID,使用clearInterval()方法傳入相應間歇呼叫ID。

一般使用超時呼叫來模擬間歇呼叫是一種最佳模式。

8.1.7 系統對話方塊
瀏覽器通過alert()、confirm()、prompt()方法呼叫系統對話方塊向用於顯示訊息,外觀由作業系統和瀏覽器設定決定,不由CSS決定。

1 alert()生成警告。沒有返回值。
2 confirm()會顯示兩個按鈕:確認、取消,返回布林值。
3 prompt()生成提示框,提示用於輸入一些文字,顯示:確認、取消、本文框。接受兩個引數:(顯示給使用者的文字提示,文字輸入域的預設值),返回輸入域的值。

8.2 location物件
location物件是最有用的BOM物件之一,它提供了與當前視窗中載入的文件有關的資訊,雅思簡介還提供了一些導航功能。location物件提供了與當前視窗中載入的文件有關的資訊,還將URL解析為獨立的片段:hash、host、hostname、href、pathname、port、protocol、search。設定相應的屬性,可以逐段或者整體性地修改瀏覽器的URL。

window.location與document.location引用的是同一物件。

位置操作:location物件可以通過很多方式改變瀏覽器位置。其中最常用的方法是設定location.href屬性

使用assign()方法併為其傳遞一個URL,可以立即開啟新URL並在瀏覽器的歷史記錄中生成一條記錄(可以後退),將window.location或location.href設定為一個URL值,也會呼叫assign()方法。

要禁止後退,可以呼叫replace()方法,接受導航到的URL引數,且不會在歷史記錄中生成新記錄。

reload()方法以最有效過載當前顯示的頁面,會從瀏覽器快取中重新架子啊,看氣質強制伺服器重新載入,傳遞引數true。

8.3 navigator物件
主要用來識別客戶端瀏覽器。eg:navigator.userAgent;返回使用者代理字串。

8.3.1 檢測外掛
navigator.plugins;返回瀏覽器中安裝的外掛資訊的陣列,陣列中每一項包含下列屬性:
name:外掛名字;
descripttion:外掛的檔名;
filename:外掛的檔名;
length:外掛所處理的MIME型別數量。

IE檢測外掛的唯一方式是使用專有的ActiveXObject型別,並嘗試建立一個特定外掛的例項。

8.3.2 註冊處理程式
Firefox為navigator物件增加了registerContentHandler()和registerProtocolHandle()方法,可以讓一個站點指明它可以處理特定型別的資訊。

registerContentHandler()接受三個引數:(要處理的MIME型別,可以處理該MIME型別的頁面URL,應用程式名稱)。registerProtocolHandle()接受三個引數:(要處理的協議,處理該協議的頁面URL,應用程式的名稱)

8.4 screen物件
screen物件只用來表明客戶端能力,包括瀏覽器視窗外部的顯示器資訊,如畫素寬度和高度。在測定客戶端能力的站點跟蹤工具中常用。調整瀏覽器視窗的大小,使其佔據螢幕的可用空間,例如:

許多瀏覽器禁用調整瀏覽器視窗大小的能力,因此上面程式碼不一定在所有環境下都是適用的。

8.5 history物件
history物件儲存著使用者上網的歷史記錄,從視窗被開啟的那一刻算起,sat閱讀分數表但是無法得知使用者瀏覽過的URL,可以借用使用者訪問過的頁面列表,實現後退和前進。

history.go()方法可以在使用者歷史記錄中跳轉,接受一個引數:表示向後或者向前跳躍的頁面數的一個整數值。負數表示向後跳轉,整數表示向前跳轉。

也可以傳給go()方法一個字串引數,此時瀏覽器會跳轉到歷史記錄中包含該字串的第一個位置——可能後退,也可能前進,具體看哪個位置最近。如果不包含該引數,則什麼方法也不做。

history.back()和history.forward()模仿瀏覽器的後退和前進按鈕。

history.length儲存著歷史記錄的數量。

補充:

    • top物件始終指向最外圍的框架,也就是整個瀏覽器視窗。
    • parent物件表示包含當前框架的框架,而self物件則回指window。