什么是BOM
BOM:Browser Object Model 瀏覽器對象模型
BOM是JavaScript組成之一,它是瀏覽器窗口的API;
BOM的核心對象是window,所以BOM是全局對象,window是瀏覽器提供給JS的API。
BOM的常用API
window.name = xxx 會將當前網頁的名字聲明為‘xxx’字符串,所以在JS中不要聲明name,因為var name = true
等同于window.name = true
那么name === 'true';typeof name === 'string'
不能全局變量的字符串有哪些可以在控制臺輸入window回車查看。
window.open語句: let windowObjectReference = window.open(strUrl, strWindowName, [strWindowFeatures]); 示例:
window.open('http://www.baidu.com','_blank','left=100,top=100,width=100,height=100'
//打開網頁
window.close() //關閉網頁
window.opener.close() //被打開的網頁關閉
window.history.back() || window.history.forward() || window.history.go(-1||2) //后退 前進 跳轉
window.location.reload(false/true) //重新加載當前頁面
window.location = 'xxx' === window.location.href = 'xxx'//會在當前路徑下的'xxx'路徑
window.location.protocol //獲取網頁協議
window.location.host //獲取域名
window.location.port //獲取端口
window.location.pathname //獲取路徑
window.location.search //獲取查詢字符串
window.location.hash //獲取錨點
window.navigator.(language 語言||userAgent 當前是什么瀏覽器) //獲取瀏覽器的相關信息
window.pageX/YOffset //網頁滾動位置
window.confirm('xxx') //彈出確認和取消
window.scrollTo(500,500) //網頁滾動到(500,50)
window.outerWidth/outerHeight //獲取完整窗口大小
innerWidth/innerHeight //獲取文檔顯示區大小
resizeTo(width,height) //新窗口大小
location.replace(“url”) //當前頁面打開不可后退
clearInterval(timer);time=null //定時器一次性
cleartimeout(timer);time=null //定時器周期性
clearInterval(timer); timer=null //停止定時器周期性
clearTimeout(timer); timer=null //停止定時器一次性
btn.addEventListener(“事件名”,函數對象) //添加事件監聽
btn.remove //刪除事件監聽
EventListener(“事件名”,函數對象)
e.stopPropagation() //阻止冒泡
e.preventDefault //取消事件(阻止默認行為)
BOM概述
BOM是browser object model的縮寫,簡稱瀏覽器對象模型
BOM提供了獨立于內容而與瀏覽器窗口進行交互的對象,主要處理瀏覽器窗口和框架,不過通常瀏覽器特定的 JavaScript 擴展都被看做 BOM 的一部分。這些擴展包括:
1.彈出新的瀏覽器窗口
2.移動、關閉瀏覽器窗口以及調整窗口大小
3.提供 Web 瀏覽器詳細信息的定位對象
4.提供用戶屏幕分辨率詳細信息的屏幕對象
5.對 cookie 的支持
6.IE 擴展了BOM,加入了ActiveXObject 類,可以通過 JavaScript 實例化 ActiveX 對象
由于BOM主要用于管理窗口與窗口之間的通訊,因此其核心對象是window
BOM由一系列相關的對象構成,并且每個對象都提供了很多方法與屬性
BOM缺乏標準, 是各個瀏覽器廠商根據DOM在各自瀏覽器上的實現(表現為不同瀏覽器定義有差別,實現方式不同);JavaScript語法的標準化組織是ECMA,DOM的標準化組織是W3C
BOM最初是Netscape瀏覽器標準的一部分
window對象是BOM的頂層(核心)對象,不是JS對象,所有對象都是通過它延伸出來的,也可以稱為window的子對象。JavaScript是通過訪問BOM(Browser Object Model)對象來訪問、控制、修改客戶端(瀏覽器),由于BOM的window包含了document,window對象的屬性和方法是直接可以使用而且被感知的,因此可以直接使用window對象的document屬性,通過document屬性就可以訪問、檢索、修改XHTML文檔內容與結構。因為document對象又是DOM(Document Object Model)模型的根節點。可以說,BOM包含了DOM(文檔對象模型),瀏覽器提供出來給予訪問的是BOM對象,從BOM對象再訪問到DOM對象,從而js可以操作瀏覽器以及瀏覽器讀取到的文檔。
BOM的組成
一、window對象
window對象是BOM的核心。它具有雙重角色,既是通過js訪問瀏覽器窗口的一個接口,又是一個Global(全局)對象。這意味著在網頁中定義的任何對象,變量和函數,都以window作為其global對象。
全局的window對象
JavaScript中的任何一個全局函數或變量都是window的屬性
window與self對象
self對象與window對象完全相同,self通常用于確認就是在當前的窗體內
window的子對象
1.document 對象
2.frames 對象
3.history 對象
4.location 對象
5.navigator 對象
6.screen 對象
window對象的函數和屬性索引
窗體控制
moveBy() 函數可相對窗口的當前坐標把它移動指定的像素
moveTo() 函數可把窗口的左上角移動到一個指定的坐標
resizeBy() 函數用于根據指定的像素來調整窗口的大小
resizeTo() 函數用于把窗口大小調整為指定的寬度和高度
screenLeft 和 screenTop屬性返回窗口相對于屏幕的X和Y坐標
screenX 和 screenY 屬性返回窗口相對于屏幕的X和Y坐標
pageXOffset 和 pageYOffset 屬性設置或返回當前頁面相對于窗口顯示區左上角的 X 位置。pageYOffset 設置或返回當前頁面相對于窗口顯示區左上角的 Y 位置
outerWidth 和 outerHeight 屬性設置或返回一個窗口的外部寬度(高度),包括所有界面元素(如工具欄/滾動條)
窗體滾動軸控制
scrollBy() 函數可把內容滾動指定的像素數
scrollTo() 函數可把內容滾動到指定的坐標
提示:上面幾個函數的名字最后都帶有To或By,to是絕對的意思(從整體而言),by是相對的意思(從原先的位置而言)
窗體焦點控制
focus() 函數可把鍵盤焦點給予一個窗口
blur() 函數可把鍵盤焦點從頂層窗口移開
新建窗體
open() 函數用于打開一個新的瀏覽器窗口或查找一個已命名的窗口
close() 函數用于關閉瀏覽器窗口
createPopup() 函數用來創建一個彈出窗口
opener 屬性是一個可讀可寫的屬性,可返回對創建該窗口的 Window 對象的引用
closed 屬性可返回一個布爾值,該值聲明了窗口是否已經關閉
對話框
alert() 函數用于顯示帶有一條指定消息和一個 確認 按鈕的警告框
confirm() 函數用于顯示一個帶有指定消息和確認及取消按鈕的對話框
prompt() 函數用于顯示可提示用戶進行輸入的對話框
狀態欄
window.defaultStatus 屬性可設置或返回窗口狀態欄中的默認文本。該屬性可讀可寫
window.status 屬性可設置或返回窗口狀態欄中的文本
print() 函數用于打印當前窗口的內容
時間等待與間隔
setTimeout() 函數用于在指定的毫秒數后調用函數或計算表達式
clearTimeout() 函數可取消由 setTimeout() 方法設置的 timeout
setInterval() 函數可按照指定的周期(以毫秒計)來調用函數或計算表達式
clearInterval() 函數可取消由 setInterval() 設置的 timeout
二、document對象
document對象用于表現HTML頁面當前窗體的內容,是window對象的屬性,包含了一個節點對象(該對象包含每個單獨頁面的所有HTML元素,這就是W3C的DOM對象,由于document對象內容比較我,我們將在后面專門撰寫文章進行講解)。
三、frames對象
frames對象用于表現HTML頁面當前窗體的中的框架集合,是window對象的屬性。如果頁面使用框架,將產生一個框架集合frames,在集合中可用數字(從0開始,從左到右,逐行索引)或名字索引框架。
window:當前框架
self 屬性可返回對窗口自身的只讀引用
Top 屬性返回當前窗口的最頂層瀏覽器窗口
parent 屬性返回當前窗口的父窗口
四、history對象
history對象用于窗體中的導航,是window對象的屬性,瀏覽者通??梢允褂脼g覽器的前進與后退按鈕訪問曾經瀏覽過的頁面。JavaScript的history對象記錄了用戶曾經瀏覽過的頁面,并可以實現瀏覽器前進與后退相似的導航功能;可以通過back函數后退一個頁面,forward函數前進一個頁面,或者使用go函數任意后退或前進頁面,還可以通過length屬性查看history對象中存儲的頁面數。
go() 函數可加載歷史列表中的某個具體的頁面
back() 函數可加載歷史列表中的前一個 URL(如果存在)
forward() 函數可加載歷史列表中的下一個 URL
length 屬性聲明了瀏覽器歷史列表中的元素數量
五、location****對象
location對象用于獲取或設置窗體的URL并可以用于解析URL。它既是window對象的屬性又是document對象的屬性,包含8個屬性,其中7個都是當前窗體的URL的一部分,剩下的也是最重要的一個是href屬性,代表當前窗體的URL。8個屬性都是可讀寫的,但是只有href與hash的寫才有意義。
assign() 函數加載一個新的文檔
replace() 函數可用一個新文檔取代當前文檔
reload() 函數用于刷新當前文檔
hash 屬性是一個可讀可寫的字符串,該字符串是 URL 的錨部分(從 # 號開始的部分)
host 屬性是一個可讀可寫的字符串,可設置或返回當前 URL 的主機名稱和端口號
hostname 屬性是一個可讀可寫的字符串,可設置或返回當前 URL 的主機名
href 屬性是一個可讀可寫的字符串,可設置或返回當前顯示的文檔的完整 URL
pathname 屬性是一個可讀可寫的字符串,可設置或返回當前 URL 的路徑部分
port 屬性是一個可讀可寫的字符串,可設置或返回當前 URL 的端口部分
protocol 屬性是一個可讀可寫的字符串,可設置或返回當前 URL 的協議
search 屬性是一個可讀可寫的字符串,可設置或返回當前 URL 的查詢部分(問號 ? 之后的部分)
navigator對象
navigator對象通常用于檢測瀏覽器與操作系統的版本,是window對象的屬性。由于navigator沒有統一的標準,因此各個瀏覽器都有自己不同的navigator版本。常用的navigator函數和屬性有:
taintEnabled() 函數可返回一個布爾值,該值聲明了當前瀏覽器是否啟用了 data tainting
appCodeName 屬性是一個只讀字符串,聲明了瀏覽器的代碼名
appName 屬性可返回瀏覽器的名稱
appVersion 屬性可返回瀏覽器的平臺和版本信息。該屬性是一個只讀的字符串
cookieEnabled 屬性可返回一個布爾值,如果瀏覽器啟用了 cookie,該屬性值為 true。如果禁用了 cookie,則值為 false
platform 屬性是一個只讀的字符串,聲明了運行瀏覽器的操作系統和(或)硬件平臺
userAgent 屬性是一個只讀的字符串,聲明了瀏覽器用于 HTTP 請求的用戶代理頭的值
javaEnabled() 函數可返回一個布爾值,該值指示瀏覽器是否支持并啟用了 Java。如果是,則返回 true,否則返回 false
screen對象
screen對象用于獲取用戶的屏幕信息,是window對象的屬性。
width 屬性聲明了顯示瀏覽器的屏幕的寬度,以像素計
height 屬性聲明了顯示瀏覽器的屏幕的高度,以像素計
availWidth 屬性聲明了顯示瀏覽器的屏幕的可用寬度,以像素計。在 Windows 這樣的操作系統中,這個可用高度不包括分配給半永久特性(如屏幕底部的任務欄)的垂直空間
availHeight 屬性聲明了顯示瀏覽器的屏幕的可用高度,以像素計。在 Windows 這樣的操作系統中,這個可用高度不包括分配給半永久特性(如屏幕底部的任務欄)的垂直空間
colorDepth 屬性返回目標設備或緩沖器上的調色板的比特深度
pixelDepth 屬性返回顯示屏幕的顏色分辨率(比特每像素)