瀏覽器窗口尺寸

+ 指的是瀏覽器可視窗口的尺寸 + 瀏覽器可能會(huì)出現(xiàn)滾動(dòng)條=> 在一般瀏覽器中，滾動(dòng)條算瀏覽器的一部分=> 在MAC中的safari瀏覽器上，是不算的 滾動(dòng)條是隱形的 + 兩個(gè)屬性1. innerWidth2. innerHeight + 共同點(diǎn)， 包含滾動(dòng)條的尺寸

瀏覽器的彈出層

+ 在BOM里面，給我們提供了三個(gè)彈出層 + 可以在瀏覽器彈出一些信息1. alert() 警告框-> 只彈出一段提示文本-> 只有一個(gè)確定按鈕2. confirm() 選擇框-> 彈出一段提示文本-> 有確定和取消兩個(gè)按鈕3. prompt()-> 彈出一段提示文本-> 彈出一個(gè)input輸入框-> 有確定和取消兩個(gè)按鈕語(yǔ)法1. alert("提示文本")返回值 undefined2. confirm("提示文本")返回值 確定為true 取消為false3. prompt("提示文本")返回值 如果用戶點(diǎn)擊確定，那么就是文本框里的內(nèi)容如果用戶點(diǎn)擊取消，那么就是null共同點(diǎn)+ 會(huì)阻斷程序的繼續(xù)執(zhí)行=> 因?yàn)閖s是單線程=> 彈出彈出層以后，如果用戶沒有點(diǎn)擊按鈕表示當(dāng)前彈出層沒有結(jié)束+ 直到用戶操作以后，才會(huì)向下執(zhí)行代碼

瀏覽器的地址欄

+ 一個(gè)地址包含哪些內(nèi)容=> http://www.baidu.com?a=100&b=200#abc-> http 傳輸協(xié)議-> www.baidu.com 域名-> ?a=100&b=200 查詢字符串-> #abc 哈希值(hash) + 地址里面包含的內(nèi)容的作用=> 傳輸協(xié)議額 前后端交互的方式=> 域名 找到一臺(tái)服務(wù)器=> 查詢字符串-> 不影響你打開這個(gè)頁(yè)面-> 打開這個(gè)頁(yè)面的時(shí)候攜帶的信息=> 哈希 錨點(diǎn)定位 + 在window 下有一個(gè)成員叫做location=> location是一個(gè)對(duì)象，里面存儲(chǔ)著和網(wǎng)頁(yè)地址所有內(nèi)容相關(guān)的信息=> hash 當(dāng)前頁(yè)面的hash值=> href 是一個(gè)讀寫的屬性(當(dāng)前地址欄地址)-> 讀 獲取當(dāng)前打開頁(yè)面的地址-> 寫 設(shè)置當(dāng)前打開頁(yè)面的地址=> search 當(dāng)前地址中的查詢字符串(queryString)-> 這個(gè)是其他頁(yè)面跳轉(zhuǎn)到當(dāng)前頁(yè)面帶來的信息-> 我們?yōu)榱耸褂?需要把它解析出來 + reload()=>重新加載當(dāng)前頁(yè)面 相當(dāng)于刷新*** 不能寫在打開頁(yè)面就能執(zhí)行的地方

瀏覽器的歷史記錄

+ 操作瀏覽器前進(jìn)后退 + window下有一個(gè)history 的成員=> 是一個(gè)對(duì)象=> 里面包含了一些操作歷史記錄的屬性和方法1. back()語(yǔ)法：window.history.back();作用：你需要有歷史記錄 相當(dāng)于?前提：你需要有歷史記錄，不然沒得回退2. forward()語(yǔ)法：window.history.forward();作用：前進(jìn)到下一條歷史記錄 相當(dāng)于?前提：你需要回退過后，才可以操作3. go()語(yǔ)法：window.history.go();作用：正整數(shù) 表示前進(jìn) 相當(dāng)于?0 表示刷新當(dāng)前頁(yè)面負(fù)整數(shù) 表示后退 相當(dāng)于?前提：你需要回退過后，才可以操作

瀏覽器的版本信息

+ 用來區(qū)分瀏覽器在window下有一個(gè)成員叫做 navigatornavigator 是一個(gè)對(duì)象，里面存儲(chǔ)著瀏覽器的版本信息 1. userAgent=> 表示瀏覽器的版本信息 2. appName=> 所有瀏覽器都是統(tǒng)一的名字 netscape 3. platform 表示瀏覽器操作系統(tǒng)

瀏覽器的常見事件

1. window.onload = function(){}=> 頁(yè)面所有資源加載完畢以后執(zhí)行=> 所有資源 音頻，視頻，圖片=> js前置 2. window.onscroll = function(){}=> 瀏覽器滾動(dòng)條滾動(dòng)的時(shí)候觸發(fā)=> 無論是橫向還是縱向，只要滾動(dòng)就觸發(fā)-> 樓層導(dǎo)航-> 頂部通欄和頂部按鈕的顯示-> 漸進(jìn)顯示頁(yè)面-> 瀑布流 3. window.onresize = function(){}=> 瀏覽器可視窗口改變的時(shí)候觸發(fā)=> 只要改變就會(huì)觸發(fā)=> 一般結(jié)合innerWidth 和 innerHeight 來判斷屏幕尺寸-> 移動(dòng)端： 橫屏-> 響應(yīng)式布局： 判斷窗口大小

瀏覽器卷去的高度和寬度

+ 頁(yè)面比窗口寬或者高的時(shí)候 + 會(huì)有一部分是隨著滾動(dòng)隱藏的 + 我們管上邊隱藏叫做卷去的高度 + 我們管左邊隱藏叫做卷去的寬度獲取卷去的高度：文檔 html1. document.documentElement.scrollTop=> 使用必須有 DOCTYPE2. document.body.scrollTop=>必須沒有 DOCTYPE3. 兼容寫法：=> var scrollTop = document.documentElement.scrollTop || document.body.scroolTop=> || 可以當(dāng)作短路表達(dá)式使用-> 當(dāng)前面為true時(shí)候，直接返回前面的值-> 當(dāng)前面為false時(shí)候，直接返回后面的值獲取卷去的寬度1. document.documentElement.scrollLeft=> 使用必須有 DOCTYPE2. document.body.scrollLeft=>必須沒有 DOCTYPE3. 兼容寫法：=> var scrollLeft = document.documentElement.scrollLeft || document.body.scroolLeft=> || 可以當(dāng)作短路表達(dá)式使用-> 當(dāng)前面為true時(shí)候，直接返回前面的值-> 當(dāng)前面為false時(shí)候，直接返回后面的值瀏覽器滾動(dòng)1. scrollTo()1.1 window.scrollTo(橫向最表，縱向坐標(biāo))=> 書寫不需要單位，給一個(gè)數(shù)字即可=> 如果你傳遞數(shù)字，必須有兩個(gè)參數(shù)，一個(gè)參數(shù)報(bào)錯(cuò)1.2 window.scrollTo({top: 縱向坐標(biāo)left: 橫向坐標(biāo)})=> 對(duì)象里面寫幾個(gè)值無所謂=> 可以依靠第三個(gè)配置項(xiàng)來決定平滑滾動(dòng)還是瞬間定位-> behavior:'smooth','instant'不能決定滾動(dòng)時(shí)間

自己完成瀏覽器回到頂部

1. document.documentElement.scrollLeftdocument.documentElement.scrollTop是讀寫屬性 可以獲取可以設(shè)置 賦值 2. 定時(shí)器每隔一段時(shí)間就執(zhí)行一次代碼如果每隔30ms 就讓瀏覽器卷曲高度 - 20 3. 如果鼠標(biāo)點(diǎn)擊或著往下拉都不會(huì)停止，為了用戶可以拉進(jìn)度條可以是用一下方法實(shí)現(xiàn)可以設(shè)置一個(gè)全局timer 然后再外部獲取到一個(gè)document.documentElement.scrollTop();若是變大了，說明用戶動(dòng)了滾動(dòng)條，然后利用timer對(duì)象停止定時(shí)器。

總結(jié)

以上是生活随笔為你收集整理的BOM 浏览器窗口尺寸 浏览器的弹出层 浏览器的地址栏 浏览器的历史记录 浏览器的版本信息 浏览器的常见事件 浏览器卷去的高度和宽度的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。