[JavaScript基礎(chǔ)] BOM

瀏覽器對象模型 Browser Object Model

Window Javascript層級中的頂層對象,表示瀏覽器窗口

屬性:
history
location
navigator
screen
詳情見下

innerWidth 返回窗口的文檔顯示區(qū)的寬度
innerHeight 返回窗口的文檔顯示區(qū)的高度
就是X Y滾動條的位置
pageXOffset 設(shè)置或返回當(dāng)前頁面相對于窗口顯示區(qū)左上角的 X 位置
pageYOffset 設(shè)置或返回當(dāng)前頁面相對于窗口顯示區(qū)左上角的 Y 位置

聲明了瀏覽器窗口距離屏幕左上角的距離X,Y
scrollTop (IE、Safari、Chrome、Opera)
scrollLeft
scrollX (Chrome、Firefox、Safari)
scrollY
方法:
alert() 顯示帶有一段消息和一個確認(rèn)按鈕的警告框
clearInterval() 取消由 setInterval() 設(shè)置的計時器
clearSetTimeout() 取消由 setTimeout() 設(shè)置的計時器
close() 關(guān)閉瀏覽器窗口
comfirm() 顯示帶有一段消息以及確認(rèn)按鈕和取消按鈕的對話框
moveBy() 可相對窗口的當(dāng)前坐標(biāo)把它移動指定的像素
moveTo() 把窗口的左上角移動到一個指定的坐標(biāo)
open()

//第一個參數(shù)是地址,第二個參數(shù)是name,第三個是新窗口頁面大小,并彈出瀏覽器到外,不寫則在瀏覽器內(nèi)打開。
window.open("https://www.google.com.hk","name","width=200,height = 200;")

prompt() 顯示可提示用戶輸入的對話框,并返回輸入內(nèi)容

prompt()

let abcd = window.prompt("123")
console.log(abcd)  //接受輸入框輸入的內(nèi)容

resizeBy() 按照指定的像素調(diào)整窗口的大小
resizeTo() 把窗口的大小調(diào)整到指定的寬度和高度
scrollBy(x, y) 按照指定的像素值來滾動內(nèi)容 兩個參數(shù),x y
scrollTo(x, y) 把內(nèi)容滾動到指定的坐標(biāo) 兩個參數(shù),x y
setInterval() 按照指定的周期(以毫秒計)來調(diào)用函數(shù)或計算表達(dá)式

let timer1 = setInterval(function(){
    console.log("每兩秒執(zhí)行一次")
},2000)
timer1;

setTimeout() 在指定的毫秒數(shù)后調(diào)用函數(shù)或計算表達(dá)式

let timer = setTimeout(function(){
  console.log("五秒后執(zhí)行")
},5000)
timer;
Navigator 包含客戶端瀏覽器信息

appCodeName 返回瀏覽器的代碼名 Mozilla
appMinorVersion 返回瀏覽器的次級版本 (IE4 oprea)
appName 返回瀏覽器名稱
appVersion 返回瀏覽器的平臺和版本信息
browserLanguage 返回當(dāng)前瀏覽器的語言(IE4 oprea)
cookieEnabled 返回指明瀏覽器中是否啟用cookie的布爾值
cpuClass 返回瀏覽器系統(tǒng)的CPU等級 (IE)
onLine 返回指明系統(tǒng)是否處于脫機狀態(tài)
platform 返回運行瀏覽器的操作系統(tǒng)平臺
systemLanguage 返回當(dāng)前操作系統(tǒng)的默認(rèn)語言(IE)
userAgent 返回由客戶機發(fā)送服務(wù)器的user-agent頭部的值
userLanguage 返回操作系統(tǒng)設(shè)定的自然語言(IE4 oprea)
plugins 返回包含客戶端安裝所有插件的數(shù)組

Navigator屬性

History 包含了瀏覽器窗口訪問過的URL

屬性:
history.length 返回瀏覽器歷史列表中的URL的數(shù)量
方法:
history.back() 加載 history 列表中的前一個URL
history.forward() 加載 history 列表中的后一個URL
history.go() 加載 history 列表中的某個具體頁面

history.back(-1);
history.forward(1);
history.go(3);
Location 包含了當(dāng)前URL的信息

屬性:
以簡書網(wǎng)站為例,修改了網(wǎng)站URL信息http://www.itdecent.cn/?&123#1

location.hash 設(shè)置或返回從#號開始的URL
location.host 設(shè)置或返回主機名和當(dāng)前URL的端口號
location.hostname 設(shè)置或返回當(dāng)前 URL 的主機名
location.href 設(shè)置或返回完成的URL
location.pathname 設(shè)置或返回當(dāng)前 URL 的路徑部分。
location.port 設(shè)置或返回當(dāng)前 URL 的端口號。
location.protocol 設(shè)置或返回當(dāng)前 URL 的協(xié)議
location.search 設(shè)置或返回從問號 (?) 開始的 URL(查詢部分)

location屬性

方法:
location.assign() 加載新文檔

location.assign("https://www.google.com.hk")

location.reload() 重新加載當(dāng)前文檔,相當(dāng)于刷新。參數(shù)可選,不填或者填false則取瀏覽器緩存的文檔

location.reload(true) // 重服務(wù)器重新抓取
location.reload(false) // 從緩存中拉取

location.replace() 用新的文檔替換當(dāng)前文檔,無歷史記錄

location.replace("https://www.google.com.hk")
Screen 包含了客戶端顯示屏的信息

availWidth 可用的屏幕寬度
availHeight 可用的屏幕高度
以上兩個屬性,以像素計,減去界面特性,比如窗口任務(wù)欄。
width 返回屏幕寬度
height 返回屏幕高度

let w = screen.availWidth;
let h = screen.availHeight;
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • ??ECMAScript 是 JavaScript 的核心,但如果要在 Web 中使用 JavaScript,那么...
    霜天曉閱讀 951評論 0 0
  • 一、JS前言 (1)認(rèn)識JS 也許你已經(jīng)了解HTML標(biāo)記(也稱為結(jié)構(gòu)),知道了CSS樣式(也稱為表示),會使用HT...
    凜0_0閱讀 2,922評論 0 8
  • ECMAScript 是 JavaScript 的核心,但如果要在 Web 中使用 JavaScript,那么 B...
    劼哥stone閱讀 883評論 2 5
  • window.open()打開新窗口window.open('要打開的頁面',' _self (當(dāng)前窗口打開) ...
    0說閱讀 181評論 0 0
  • 本周溫馨時刻及點滴成果 一、健康 二、家庭 三、效能 四、財富 五、休閑 六、覺察 七、社交 八、成長 本周可提升...
    奕扉閱讀 331評論 0 0

友情鏈接更多精彩內(nèi)容