瀏覽器窗口尺寸

+ 指的是瀏覽器可視窗口的尺寸 + 瀏覽器可能會出現滾動條=> 在一般瀏覽器中，滾動條算瀏覽器的一部分=> 在MAC中的safari瀏覽器上，是不算的 滾動條是隱形的 + 兩個屬性1. innerWidth2. innerHeight + 共同點， 包含滾動條的尺寸

瀏覽器的彈出層

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

瀏覽器的地址欄

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

瀏覽器的歷史記錄

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

瀏覽器的版本信息

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

瀏覽器的常見事件

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

瀏覽器卷去的高度和寬度

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

自己完成瀏覽器回到頂部

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

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。