前端瀏覽器對象模型BOM常用對象介紹,BOM即Broswer Object Model 瀏覽器對象模型,在JavaScript中可以理解為window對象,用來進行與瀏覽器相關的一些操作,學習BOM就是學習 JavaScript中的window對象。
一、window對象 BOM的核心對象是 window,它代表瀏覽器的一個實例。在瀏覽器中,window有著雙重的角色:JavaScript訪問瀏覽器的接口對象,ES中的Global對象意味著網頁中的任何一個對象,變量,函數都是以window作為其Global對象。 1、全局作用域,在ECMAScript中,window對象扮演著Global對象的角色,也就是說,所有在全局作用域聲明的變量,函數都會變成window的屬性和方法,都可以通過 window.屬性名(或方法名) 直接調。 2、導航和打開窗口,通過 window.open() 既可以導航到一個特定的URL,也可以打開一個新的瀏覽器窗口 二、location對象 [^location 是最有用的BOM對象之一,它提供了與當前窗口中加載的文檔有關的信息]: JavaScript高級程序設計。 註: window.location 和 document.location?引用的是同一個對象。location 既是 window 對象的屬性,也是 document?對象的屬性。 三、 navigator對象 navigator 對象主要用來獲取瀏覽器的屬性,區分瀏覽器類型; navigator 對象屬性較多,且兼容性比較複雜。 四、history對象 history 對象保存著用戶上網的歷史記錄,從窗口被打開的那一刻算起,因為 history 是 window 對象的屬性,因此每個瀏覽器窗口,每個標籤乃至每個框架,都有自己的 history對象與特定的 window 對象關聯。 總結瀏覽器對象模型BOM中常用的對象有navigator,window, location, history window既是 JavaScript 的全局對象,也是BOM的一個實例,所有的全局方法,屬性,BOM中的屬性,都可以通過 window. 來調用; window作為BOM的實例,最常用的幾個方法分別是:window.open(),window.close(),分別用來打開和關閉瀏覽器窗口頁面,這裡需要注意的是,通過 open 方法打開的頁面,才能通過close 方法關閉; location對象也是用的比較多的一個BOM對象,主要用來操作URL相關的一些信息,除了修改 Hash 之外的任何屬性,頁面都會重新加載,歷史記錄會多加一條歷史記錄; location對象還有一個 reload() 方法用於手動重新加載頁面,該方法接收一個可選參數,為 true 的時候表示從伺服器重新加載,否則可能從瀏覽器緩存中重新加載頁面; location對象 還有一個比較特殊的方法,location.replace(),該方法可以覆蓋當前頁面並重新加載,同時不會在 history 中生成歷史記錄; navigator對象主要用來獲取瀏覽器相關的一些信息,使用的時候需要注意兼容性。可以用來獲取瀏覽器類(Chrome,safrai,FireFox,Edge,IE)等; history對象主要用來操作瀏覽器URL的歷史記錄,可以通過參數向前,向後,或者向指定URL跳轉。可以通過 length 屬性獲取記錄數,判斷當前頁面是否是打開的首個頁面;