學習BOM

NO IMAGE
1 Star2 Stars3 Stars4 Stars5 Stars 給文章打分!
Loading...

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() //動態向頁面寫入內容

相關文章

前端開發 最新文章