BOM

2018-07-10 15:22 更新

Table of Contents generated with DocToc

BOM

BOM

BOM 為瀏覽器窗口對象的一組 API。

BOM 結(jié)構(gòu)圖

屬性

屬性名	描述
navigator	瀏覽器信息
location	瀏覽器定位和導(dǎo)航
history	窗口瀏覽器歷史
screen	屏幕信息

navigator

navigator.userAgent

Chrome, Mozilla/5.0(Windows NT 6.1; WOW64) Apple WebKit/37.36 (KHTML, like Gecko) Chrome/40.0.2214.115 Safari/537.36
Firefox, Mozilla/5.0(Windows NT 6.1; WOW64; rv:36.0) Gecko/20100101 Firefox/36.0
IE, Mozilla/5.0 (Windows NT 6.1; WOW64; Trident/7.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; .NET4.0C; .NET4.0E; InfoPath.3; rv:11.0) like Gecko

appCodeName: "Mozilla"appName: "Netscape"appVersion: "5.0 (Macintosh; Intel Mac OS X 10_10_3) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/43.0.2357.124 Safari/537.36"cookieEnabled: truedoNotTrack: "1"geolocation: GeolocationhardwareConcurrency: 8language: "en-US"languages: Array[4]maxTouchPoints: 0mimeTypes: MimeTypeArrayonLine: truepermissions: Permissionsplatform: "MacIntel"plugins: PluginArrayproduct: "Gecko"productSub: "20030107"serviceWorker: ServiceWorkerContaineruserAgent: "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_10_3) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/43.0.2357.124 Safari/537.36"vendor: "Google Inc."vendorSub: ""webkitPersistentStorage: DeprecatedStorageQuotawebkitTemporaryStorage: DeprecatedStorageQuota__proto__: Navigator

NOTE：可以通過 userAgent 判斷瀏覽器。

location

代表瀏覽器的定位和導(dǎo)航。可以使用 location 來操作 URL 中的各個(gè)部分。最常用的有 href 屬性，當(dāng)前訪問資源的完整路徑。

http://www.github.com:8080/index.html?user=li-xinyang&lang=zh-CN#home
  |          |          |       |                  |              |
protocol     |          |       |                  |              |
          hostname     port     |                  |              |
              \        /    pathname             search          hash
                 host

方法

assign(url) 載入新的 url，記錄瀏覽記錄
replace(url) 載入新的 url 不記錄瀏覽記錄
reload() 重新載入當(dāng)前頁

history

瀏覽器當(dāng)前窗口的瀏覽歷史。

length: 9state: null __proto__: History

方法

back(int) 后退
forward(int) 前進(jìn)
go(int) 正數(shù)向前，附屬向后

screen

其中包含屏幕信息。其中 avil- 開頭的屬性為可用屬性，其余則為顯示器設(shè)備屬性。

Window 方法

方法	描述
`alert()`, `confirm()` 返回真假, `prompt()` 返回用戶輸入值	三種對話框
`setTimeout()`, `setInterval()`	計(jì)時(shí)器
`open()`, `close()`	開啟窗口，關(guān)閉窗口

NOTE：對話框會阻塞線程。

打開或關(guān)閉窗口

var w = window.open('subwindow.html', 'subwin', 'width=300, height=300, status=yes, resizable=yes');

// 既可關(guān)閉窗口
w.close();

NOTE：無需記憶，更多屬性在使用時(shí)查詢文檔。

Window 事件

事件名	描述
load	文檔和所有圖片完成加載時(shí)
unload	離開當(dāng)前文檔時(shí)
beforeunload	和 unload 類似，但是它提供詢問用戶是否確認(rèn)離開的機(jī)會
resize	拖動改變?yōu)g覽器窗口大小時(shí)
scroll	拖動瀏覽器時(shí)