學習BOM

BOM

學前端要學css html javascript

學習javascript要學 ecmascript(es3,es5,es6,es7) dom bom

咱們如今來學習BOM

BOM是瀏覽器對象模型(Browser Object Model)

window(窗口)
navigator(導航)
location
screen
history
document

width(窗口)

window對象是js中的頂級對象，全部定義在全局做用域中的變量、函數都會變成window對象的屬性和方法，在調用的時候能夠省略window。咱們在控制檯打印 console.log(windows) ，控制檯會輸出不少屬性，事實上，navigator ， location ， screen ， history ， document 這幾個屬性也是 window 下的屬性。

1.打開與關閉
     打開 window.open(url,type) //type _self(當前窗口打開) _blank(默認 新窗口打開)
     關閉 window.close() 關閉窗口 (它只能關閉程序打開的窗口直接在地址欄輸入地址打開的頁面不適用。)
2.系統對話框
    alert() （系統彈窗）
    confirm() （確認，取消彈窗）
    prompt() （輸入彈窗）
3.定時器
    setInterval clearInterval 間隔一段時間執行一次代碼
    setTimeout clearTimeout 到指定一段時間後執行一次代碼

navigator(導航)

包含大量有關Web瀏覽器的信息，在檢測瀏覽器及操做系統上很是有用

navigator.userAgent(用來描述瀏覽器的一些版本信息，能夠作瀏覽器的嗅探)
     
window.navigator.appCodeName //瀏覽器代碼名
window.navigator.appName //瀏覽器步伐名
window.navigator.appMinorVersion //瀏覽器補釘版本
window.navigator.cpuClass //cpu類型x86
window.navigator.platform //操做體系類型win32
window.navigator.plugins
window.navigator.opsProfile
window.navigator.userProfile
window.navigator.systemLanguage //客戶體系語言zh-cn簡體中文
window.navigator.userLanguage //用戶語言,同上
window.navigator.appVersion //瀏覽器版本(包括 體系版本)
window.navigator.userAgent//用戶代理頭的字符串表示
window.navigator.onLine //用戶否在線
window.navigator.cookieEnabled //瀏覽器是否撐持cookie
window.navigator.mimeTypes

location(地址)

屬性:

hostname 主機名(域名)
href（網址）
pathname 具體文件路徑
hash 哈希("#"開始的文字)

方法：

reload 從新加載當前頁面(刷新)

location對象：表示載入窗口的URL，也可用window.location引用它
location.href //當前載入頁面的完整URL
location.host //服務器的名字
location.pathname //URL中主機名後的部分，如/pictures/index.htm
location.hash //若是URL包含#，返回該符號以後的內容，如#anchor1
location.reload(true | false); //從新載入當前頁面，爲false時從瀏覽器緩存中重載，爲true時從服務器端重載，默認爲false
document.location.reload(URL) //打開新的網頁

screen (屏幕)

至關於css3 媒體查詢

window.screen.width //屏幕寬度
window.screen.height //屏幕高度
window.screen.availWidth //可用寬度(除去任務欄的高度)
window.screen.availHeight //可用高度(除去任務欄的高度)

history (歷史)

history.back() //在瀏覽歷史裏後退一步
history.forward() //在瀏覽歷史裏前進一步
history.go(i) //到汗青詳細登記單的第i位

h5裏的history(history api)：
pushState(a,b,c)//a:數據 c:地址欄
window.onpopstate

document 文檔

document.write() //動態向頁面寫入內容