從零開始學習前端JAVASCRIPT — 5、JavaScript基礎BOM

標籤：ima   代理   地區   res   底線   open   hash   pos   作用   

1：BOM（Browser  Object  Model ）概念

window對象是BOM中所有對象的核心。 

 

2：window屬性（較少用）

self：self代表自己，相當於window。

　 window.self; //指向自身視窗

parent：返回父視窗。

top：返回頂層視窗，和parent作用一樣。

opener：視窗開啟者。

 

3：window方法

1.window.open(url, name, feature, replace);

url：一個可選的字串，聲明了要在新視窗中顯示的文檔的 URL。如果省略了這個參數，或者它的值是Null 字元串，那麼新視窗就不會顯示任何文檔。

name：一個可選的字串，該字串是一個由逗號分隔的特徵列表，其中包括數字、字母和底線，該字元聲明了新視窗的名稱。

這個名稱可以用作標記 <a> 和 <form> 的屬性 target 的值。

feature：自行擴充。replace：自行擴充。

Google預設會把系統自動開啟的新網頁阻止掉，但不阻止通過事件開啟新的網頁。

2.close：關閉瀏覽器。（window.close()//關閉瀏覽器視窗）

但都支援通過別的網頁開啟的新的網頁關閉。

3.alert(顯示的文本)：彈出窗。（window.alert()//瀏覽器視窗彈框）

4.confirm(對話方塊提示的文字)：該方法有傳回值，點擊確定返回true，點擊取消返回false。

 

console.log(window.confirm(‘今天下雪了嗎？‘)); //點擊確認輸出true；點擊取消輸出false

 

5.prompt(提示資訊)：輸入框。點擊確定返回字串，點擊取消返回null。

console.log(window.prompt(‘請問1+1等於幾？‘));//快顯視窗有書寫區域，傳回值為輸入的資訊，若不填寫為null

 

4：history對象

該對象包含瀏覽器視窗訪問過的url。

1.屬性

length  返回瀏覽器記錄的數量

2.方法(使用以下方法返回網頁history的記錄不增不減)

back() 後退，載入前一個url。

forward() 前進。

go(number)  如果參數是正數，那麼就是前進相應的數目，如果是負數那麼反之，如果是0那麼就是重新整理。

 

5：location對象

包含有當前url的相關資訊，而history對象不能具體反應url的相關資訊。

屬性：

href：設定或返回完整的url。可以為相對路徑，也可以為絕對路徑。

search：返回url?後面的查詢部分。

hash ：是一個可讀可寫的字串，該字串是 URL 的錨部分（從 # 號開始的部分）。

方法：

assign(url)：載入新的文檔。

reload(boolean)：重新載入文檔，當參數是true，任何時候都會重新載入，false的時候，只有在文檔改變的時候才會載入，否則直接讀取記憶體當中的。

replace(url)：用新的文檔代替當前的文檔。但不會在 History 對象中產生一個新的記錄。當使用該方法時，新的 URL 將覆蓋 History 對象中的目前記錄。

 

6：navigator對象 userAgent ：使用者代理程式資訊，通過該屬性可擷取瀏覽器及作業系統資訊。可通過此對象查看瀏覽器的資訊，項目的不相容此版本瀏覽器可給出使用者的相關建議。

console.log(navigator.userAgent);

 

7：window事件

• onresize：視窗縮放事件。

window.onresize = function () {console.log(2)}

•  onload：載入事件網頁載入完畢後執行。// 擷取瀏覽器視窗寬度/高度

window.onload = function () {console.log(document.documentElement.clientWidth)console.log(document.documentElement.clientHeight)}

• onscroll：滾動事件。// 擷取瀏覽器捲軸隱藏的寬度/高度

chrome(body)、Firefox、IE(documentElement)

通過分裝方法相容各版本的瀏覽器：

　　window.onscroll = function () {　　　　var iScrollT = document.documentElement.scrollTop || document.body.scrollTop;　　　　var iScrollL = document.documentElement.scrollLeft || document.body.scrollLeft;　　　　console.log(iScrollL)　　}

 

　　

 

從零開始學習前端JAVASCRIPT — 5、JavaScript基礎BOM