[js]BOM篇

1、什麼是BOM

  • BOM(Browser Object Model)即瀏覽器對象模型。
  • BOM提供了獨立於內容 而與瀏覽器窗口進行交互的對象;
  • 因爲BOM主要用於管理窗口與窗口之間的通信,所以其核心對象是window;
  • BOM由一系列相關的對象構成,而且每一個對象都提供了不少方法與屬性;
  • BOM缺少標準,JavaScript語法的標準化組織是ECMA,DOM的標準化組織是W3C,BOM最初是Netscape瀏覽器標準的一部分

2、window對象

  • 瀏覽器裏面,window對象指當前的瀏覽器窗口。
  • 它也是當前頁面的頂層對象,即最高一層的對象,全部其餘對象都是它的下屬。
  • 一個變量若是未聲明,那麼默認就是頂層對象的屬性。

一、Window的屬性

  1.1  window.name 屬性是一個字符串,表示當前瀏覽器窗口的名字。窗口不必定須要名字,這個屬性主要配合超連接和表單的target屬性使用

  1.2 window.closed,window.opener

  (1) window.closed屬性返回一個布爾值,表示窗口是否關閉html

  (2) window.opener屬性表示打開當前窗口的父窗口。若是當前窗口沒有父窗口(即直接在地址欄輸入打開),則返回nulljava

  1.3 window.selfwindow.window屬性都指向窗口自己。這兩個屬性只讀

window.self === window // true
window.window === window // true

   1.4 window.frames屬性返回一個相似數組的對象,成員爲頁面內全部框架窗口,包括frame元素和iframe元素。window.frames[0]表示頁面中第一個框架窗口

  • 若是iframe元素設置了idname屬性,那麼就能夠用屬性值,引用這個iframe窗口。好比<iframe name="myIFrame">能夠用frames['myIFrame']或者frames.myIFrame來引用
  • frames屬性其實是window對象的別名
  • window.length屬性返回當前網頁包含的框架總數。若是當前網頁不包含frameiframe元素,那麼window.length就返回0
frames === window // true
window.frames.length === window.length // true

  1.5 window.frameElement屬性主要用於當前窗口嵌在另外一個網頁的狀況(嵌入<object><iframe><embed>元素),返回當前窗口所在的那個元素節點。若是當前窗口是頂層窗口,或者所嵌入的那個網頁不是同源的,該屬性返回null

// HTML 代碼以下
// <iframe src="about.html"></iframe>

// 下面的腳本在 about.html 裏面
var frameEl = window.frameElement;
if (frameEl) {
  frameEl.src = 'other.html';
}
上面代碼中,frameEl變量就是<iframe>元素。

 

  1.6   window.top屬性指向最頂層窗口,主要用於在子窗口裏面獲取頂層的父窗口。

    window.parent屬性指向父窗口。若是當前窗口沒有父窗口,window.parent指向自身

  1.7 window.devicePixelRatio屬性返回一個數值,表示一個 CSS 像素的大小與一個物理像素的大小之間的比率。也就是說,它表示一個 CSS 像素由多少個物理像素組成。它能夠用於判斷用戶的顯示環境,若是這個比率較大,就表示用戶正在使用高清屏幕,所以能夠顯示較大像素的圖片

  1.8 window對象的位置信息和大小信息

  (1)window.screenXwindow.screenY屬性,返回瀏覽器窗口左上角相對於當前屏幕左上角的水平距離和垂直距離(單位像素)。這兩個屬性只讀android

  (2)window.innerHeightwindow.innerWidth屬性,返回網頁在當前窗口中可見部分的高度和寬度,即「視口」(viewport)的大小(單位像素)。這兩個屬性只讀小程序

  (3)window.outerHeightwindow.outerWidth屬性返回瀏覽器窗口的高度和寬度,包括瀏覽器菜單和邊框(單位像素)。這兩個屬性只讀數組

  (4)window.scrollX屬性返回頁面的水平滾動距離,window.scrollY屬性返回頁面的垂直滾動距離,單位都爲像素。這兩個屬性只讀瀏覽器

  (5)window.pageXOffset屬性和window.pageYOffset屬性,是window.scrollXwindow.scrollY別名cookie

  1.9 window.isSecureContext屬性返回一個布爾值,表示當前窗口是否處在加密環境。若是是 HTTPS 協議,就是true,不然就是false

 二、window對象的方法

  2.1 window.alert()  方法彈出的對話框,只有一個「肯定」按鈕,每每用來通知用戶某些信息

  2.2 window.confirm()方法彈出的對話框,除了提示信息以外,只有「肯定」和「取消」兩個按鈕,每每用來徵詢用戶是否贊成

  2.3 window.prompt()方法彈出的對話框,提示文字的下方,還有一個輸入框,要求用戶輸入信息,並有「肯定」和「取消」兩個按鈕。它每每用來獲取用戶輸入的數據

  2.4 window.open方法用於新建另外一個瀏覽器窗口,相似於瀏覽器菜單的新建窗口選項。它會返回新窗口的引用,若是沒法新建窗口,則返回null  

window.open(url, windowName, [windowFeatures])

 

  • url:字符串,表示新窗口的網址。若是省略,默認網址就是about:blank
  • windowName:字符串,表示新窗口的名字。若是該名字的窗口已經存在,則佔用該窗口,再也不新建窗口。若是省略,就默認使用_blank,表示新建一個沒有名字的窗口。
  • windowFeatures:字符串,內容爲逗號分隔的鍵值對(詳見下文),表示新窗口的參數,好比有沒有提示欄、工具條等等。若是省略,則默認打開一個完整 UI 的新窗口。若是新建的是一個已經存在的窗口,則該參數不起做用,瀏覽器沿用之前窗口的參數。

  2.5 window.close方法用於關閉當前窗口,通常只用來關閉window.open方法新建的窗口

  2.6 window.stop()方法徹底等同於單擊瀏覽器的中止按鈕,會中止加載圖像、視頻等正在或等待加載的對象

  2.7 window.moveTo()方法用於移動瀏覽器窗口到指定位置。它接受兩個參數,分別是窗口左上角距離屏幕左上角的水平距離和垂直距離,單位爲像素

  2.8 window.moveBy方法將窗口移動到一個相對位置。它接受兩個參數,分佈是窗口左上角向右移動的水平距離和向下移動的垂直距離,單位爲像素

  2.9 window.resizeTo()方法用於縮放窗口到指定大小。

  2.10 window.scrollTo方法用於將文檔滾動到指定位置。它接受兩個參數,表示滾動後位於窗口左上角的頁面座標

  window.scrollTo(options)
  • top:滾動後頁面左上角的垂直座標,即 y 座標。
  • left:滾動後頁面左上角的水平座標,即 x 座標。
  • behavior:字符串,表示滾動的方式,有三個可能值(smoothinstantauto),默認值爲auto

  2.11 window.print方法會跳出打印對話框,與用戶點擊菜單裏面的「打印」命令效果相同。

  2.12 window.focus()方法會激活窗口,使其得到焦點,出如今其餘窗口的前面

  2.13 window.blur()方法將焦點從窗口移除

  2.14 window.getSelection方法返回一個Selection對象,表示用戶如今選中的文本

  2.15 window.getComputedStyle()方法接受一個元素節點做爲參數,返回一個包含該元素的最終樣式信息的對象

  2.16 window.matchMedia()方法用來檢查 CSS 的mediaQuery語句

三 、Navigator 對象

  window.navigator屬性指向一個包含瀏覽器信息的 Navigator 對象。腳本經過這個屬性瞭解用戶使用的是哪種瀏覽器session

  一、navigator.userAgent屬性返回瀏覽器的 User Agent 字符串,表示瀏覽器的廠商和版本信息

navigator.userAgent
// "Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/29.0.1547.57 Safari/537.36"

 

  經過userAgent屬性識別瀏覽器,用戶能夠改變這個字符串經過userAgent能夠大體準確地識別手機瀏覽器,方法就是測試是否包含mobi字符串/mobi|android|touch|mini/i.test(ua)框架

var ua = navigator.userAgent.toLowerCase();

if (/mobi/i.test(ua)) {
  // 手機瀏覽器
} else {
  // 非手機瀏覽器
}

  二、Navigator.plugins屬性返回一個相似數組的對象,成員是 Plugin 實例對象,表示瀏覽器安裝的插件,好比 Flash、ActiveX 等

var pluginsLength = navigator.plugins.length;

for (var i = 0; i < pluginsLength; i++) {
  console.log(navigator.plugins[i].name);
  console.log(navigator.plugins[i].filename);
  console.log(navigator.plugins[i].description);
  console.log(navigator.plugins[i].version);
}

  三、Navigator.platform屬性返回用戶的操做系統信息,好比MacIntelWin32Linux x86_64

navigator.platform
// "Linux x86_64"

  四、navigator.onLine屬性返回一個布爾值,表示用戶當前在線仍是離線(瀏覽器斷線)。

  有時,瀏覽器能夠鏈接局域網,可是局域網不能連通外網。這時,有的瀏覽器的onLine屬性會返回true,因此不能假定只要是true,用戶就必定能訪問互聯網。不過,若是是false,能夠判定用戶必定離線。函數

navigator.onLine // true

 

  五、Navigator.language屬性返回一個字符串,表示瀏覽器的首選語言。該屬性只讀。

    Navigator.languages屬性返回一個數組,表示用戶能夠接受的語言。  

navigator.language // "en"
navigator.languages  // ["en-US", "en", "zh-CN", "zh", "zh-TW"]

 

  六、Navigator.geolocation屬性返回一個 Geolocation 對象,包含用戶地理位置的信息。注意,該 API 只有在 HTTPS 協議下可用,不然調用下面方法時會報錯

  • Geolocation.getCurrentPosition():獲得用戶的當前位置
  • Geolocation.watchPosition():監聽用戶位置變化
  • Geolocation.clearWatch():取消watchPosition()方法指定的監聽函數

  七、Navigator.cookieEnabled屬性返回一個布爾值,表示瀏覽器的 Cookie 功能是否打開

   八、Navigator.javaEnabled()方法返回一個布爾值,表示瀏覽器是否能運行 Java Applet 小程序

 4、History對象

  window.history屬性指向 History 對象,它表示當前窗口的瀏覽歷史

  一、屬性

 

  (1)History.length:當前窗口訪問過的網址數量

  (2)History.state:History 堆棧最上層的狀態值

  二、方法

  • History.back():移動到上一個網址,等同於點擊瀏覽器的後退鍵。對於第一個訪問的網址,該方法無效果。
  • History.forward():移動到下一個網址,等同於點擊瀏覽器的前進鍵。對於最後一個訪問的網址,該方法無效果。
  • History.go():接受一個整數做爲參數,以當前網址爲基準,移動到參數指定的網址,好比go(1)至關於forward()go(-1)至關於back()。若是參數超過實際存在的網址範圍,該方法無效果;若是不指定參數,默認參數爲0,至關於刷新當前頁面
  • history.go(0)至關於刷新當前頁面。

  2.1 History.pushState()方法用於在歷史中添加一條記錄

window.history.pushState(state, title, url)
  • state:一個與添加的記錄相關聯的狀態對象,主要用於popstate事件。該事件觸發時,該對象會傳入回調函數。也就是說,瀏覽器會將這個對象序列化之後保留在本地,從新載入這個頁面的時候,能夠拿到這個對象。若是不須要這個對象,此處能夠填null
  • title:新頁面的標題。可是,如今全部瀏覽器都忽視這個參數,因此這裏能夠填空字符串。
  • url:新的網址,必須與當前頁面處在同一個域。瀏覽器的地址欄將顯示這個網址。

  2.2 History.replaceState()方法用來修改 History 對象的當前記錄,其餘都與pushState()方法如出一轍

history.pushState({page: 1}, 'title 1', '?page=1')
// URL 顯示爲 http://example.com/example.html?page=1
history.pushState({page: 2}, 'title 2', '?page=2');
// URL 顯示爲 http://example.com/example.html?page=2
history.replaceState({page: 3}, 'title 3', '?page=3');
// URL 顯示爲 http://example.com/example.html?page=3
history.back()
// URL 顯示爲 http://example.com/example.html?page=1
history.back()
// URL 顯示爲 http://example.com/example.html
history.go(2)
// URL 顯示爲 http://example.com/example.html?page=3

 

  三、popstate 事件

  每當同一個文檔的瀏覽歷史(即history對象)出現變化時,就會觸發popstate事件

  僅僅調用pushState()方法或replaceState()方法 ,並不會觸發該事件,只有用戶點擊瀏覽器倒退按鈕和前進按鈕,或者使用 JavaScript 調用History.back()History.forward()History.go()方法時纔會觸發。另外,該事件只針對同一個文檔,若是瀏覽歷史的切換,致使加載不一樣的文檔,該事件也不會觸發

window.onpopstate = function (event) {
  console.log('location: ' + document.location);
  console.log('state: ' + JSON.stringify(event.state));
};

// 或者
window.addEventListener('popstate', function(event) {
  console.log('location: ' + document.location);
  console.log('state: ' + JSON.stringify(event.state));
});

 

  回調函數的參數是一個event事件對象,它的state屬性指向pushStatereplaceState方法爲當前 URL 所提供的狀態對象(即這兩個方法的第一個參數)。上面代碼中的event.state,就是經過pushStatereplaceState方法,爲當前 URL 綁定的state對象

var currentState = history.state;

 

  四、URLSearchParams API

5、瀏覽器數據儲存機制

  Storage 接口用於腳本在瀏覽器保存數據。兩個對象部署了這個接口:window.sessionStoragewindow.localStorage

  一、Storage.setItem()方法用於存入數據。它接受兩個參數,第一個是鍵名,第二個是保存的數據

window.sessionStorage.setItem('key', 'value');
window.localStorage.setItem('key', 'value');

 

  二、Storage.getItem()方法用於讀取數據。它只有一個參數,就是鍵名。若是鍵名不存在,該方法返回null

window.sessionStorage.getItem('key')
window.localStorage.getItem('key')

  三、Storage.clear()方法用於清除全部保存的數據。該方法的返回值是undefined

window.sessionStorage.clear()
window.localStorage.clear()

  四、Storage.key()接受一個整數做爲參數(從零開始),返回該位置對應的鍵值。

window.sessionStorage.setItem('key', 'value');
window.sessionStorage.key(0) // "key"

for (var i = 0; i < window.localStorage.length; i++) {
  console.log(localStorage.key(i));
}

  五、Storage 接口儲存的數據發生變化時,會觸發 storage 事件,能夠指定這個事件的監聽函數。

window.addEventListener('storage', onStorageChange);

 

  監聽函數接受一個event實例對象做爲參數。這個實例對象繼承了 StorageEvent 接口,有幾個特有的屬性,都是隻讀屬性。

  • StorageEvent.key:字符串,表示發生變更的鍵名。若是 storage 事件是由clear()方法引發,該屬性返回null
  • StorageEvent.newValue:字符串,表示新的鍵值。若是 storage 事件是由clear()方法或刪除該鍵值對引起的,該屬性返回null
  • Storage.oldValue:字符串,表示舊的鍵值。若是該鍵值對是新增的,該屬性返回null
  • Storage.storageArea:對象,返回鍵值對所在的整個對象。也說是說,能夠從這個屬性上面拿到當前域名儲存的全部鍵值對。
  • Storage.url:字符串,表示原始觸發 storage 事件的那個網頁的網址。
function onStorageChange(e) {
  console.log(e.key);
}
window.addEventListener('storage', onStorageChange);
相關文章