“ 瀏覽器內置對象，我們每天都與其打交道，可能你并未全面的去了解過它。我們一起討論下你有過哪些實踐。”

1. 什么是瀏覽器對象模型？(BOM ：Browser Object Model)

瀏覽器模型提供了獨?于內容的、可以與瀏覽器 窗?進?滑動的對象結構，瀏覽器提供的 API 其主要對象有：

window 對象——BOM 的核?，是 js 訪問瀏覽器的接?，也是 ES 規定的 Global 對象

location 對象：提供當前窗?中的加載的?檔有關的信息和?些導航功能。既是 window 對象屬 性，也是 document 的對象屬性

navigator 對象：獲取瀏覽器的系統信息

screen 對象：?來表?瀏覽器窗?外部的顯?器的信息等

history 對象：保存??上?的歷史信息

內置對象的一些方法或屬性，我放到了后文第3點，羅列這些本身沒啥意思，懂得在實踐中使用才是有價值的學習。接下來我分享幾點我的實踐，當然這并不能涵蓋我職業生涯中遇到的情況，你的工作學習中如有遇到別的場景，歡迎一起探討。

2. 我有過哪些實踐？

2.1 斷網監測我之前做了個展示實時數據的項目，正常狀況下用戶的電腦只要開著這個監測頁面，那么數據都能夠實時刷新。不過，同事總會帶著筆記本前往各個會議室，這時無線網就會中斷，導致客戶端與服務端失去websocket連接，自然數據就不能實時刷新了。

解決這個問題很簡單，我們就使用navigator這個內置對象的online屬性來檢測用戶網絡是否連接正常。如果你想看這個API的兼容性，這里教大家一個判斷瀏覽器是否支持的技巧，我們可以使用caniuse網站查看，非常的直觀

https://caniuse.com/?search=navigator.onLine

對應的業務邏輯代碼，大家可以看一下，每隔5秒會檢測是否斷網。如果有出現過斷網，就會在網絡連接正常的時候嘗試重連，即如果心跳發送失敗，則表明失去與服務端websocket的連接，需要重連。

initWebSocket() { this.connection(); let that= this; // 斷開重連機制,嘗試發送消息,捕獲異常發生時重連 this.timer = setInterval(() => { if (navigator.onLine) { console.log('網絡連接正常'); try { that.stompClient.send("Heartbeat test"); } catch (err) { console.log("WebSocket斷線了%s,開始重連", err); that.connection(); } } else { console.log('已斷網，WebSocket斷線了%s'); } }, 5000);},connection() { let that=this; // 建立連接對象 let socket = new SockJS(`${process.env.VUE_APP_WEBSOCKET_URL}/xxxxx-websocket`); // 獲取STOMP子協議的客戶端對象 this.stompClient = Stomp.over(socket); // 定義客戶端的認證信息,按需求配置 let headers = {} // 向服務器發起websocket連接 this.stompClient.connect(headers,() => { this.stompClient.subscribe('/xxxxx/realtime/ready', (msg) => { // 訂閱服務端提供的某個topic console.log('WebSocket收到消息%s，刷新實時數據',msg.body); that.reloadAll(); },headers); }, (err) => { // websocket連接發生錯誤時的處理函數 console.log('WebSocket連接失敗%s',err); });},disconnect() { // 斷開websocket連接 if (this.stompClient) { this.stompClient.disconnect(); }}? ??

2.2 不同屏幕適配

之前做了一個web應用系統，有一個常見的適配問題。用戶有的使用筆記本，有的是寬屏臺式機。假定我們將某個業務的表格列寬設置一個固定值，可能在筆記本上能夠良好的展示，但到了臺式機顯示屏，表格展示可能就不能鋪滿屏幕。

解決這個問題，我們使用到了Document 對象，可以稱作是DOM對象。我們通過document.body.clientWidth獲取內部寬度。

頁面是vue做的，示例代碼如下：

2.2.1首先定義一下變量

data() { return { screenWidth: document.body.clientWidth-50 }}

2.2.2 表格中按需確立列寬，例如screenWidth*0.1

2.2.3 不要忘了一步，用戶切換屏幕尺寸時，記得修改變量

mounted () { //監聽屏幕寬度 window.onresize = () => { return (() => { window.screenWidth = document.body.clientWidth-50; this.screenWidth = window.screenWidth; })() }}

2.3 獲取地址欄path及參數

這個比較簡單，留這個大家做一下吧。

3. 內置對象方法參考

Window 對象 windows 對象是整個瀏覽器對象模型的核?，其扮演著既是接??是全局對象的??

alert()、 confirm() 、prompt()、 open() 、

onerror() 、setTimeout() 、setInterval()

窗?位置：

screenLeft 、screenTop、 screenX 、

screenY 、moveBy(x,y) moveTo(x,y)

窗???：

innerWidth 、innerHeight、outerWidth、 outerHeight、

resizeTo(width, height)、 resizeBy(width, height)

定時器

setTimeout 、setInterval

Location 對象 提供當前窗?中的加載的?檔有關的信息和?些導航功能。既是 window 對象屬性，也是 document 的對象屬性

location 對象的主要屬性：

hash、 host、 hostname、 href 、pathname、 port 、protocol 、search

Navigation 對象 navigation 接?表???代理的狀態和標識，允許腳本查詢它和注冊??進??些活動

History 對象 history 對象保存著??上?的歷史記錄，從窗?被打開的那?刻算起，history 對象是?窗?的瀏覽 歷史??檔和?檔狀態列表的形式表?。

go() 、back()、 forword() 、length

學無止境，覺得不錯的話，請記得為我關注、點贊、轉發三連哦！

總結

以上是生活随笔為你收集整理的内置host_浏览器内置对象应用实践的全部內容，希望文章能夠幫你解決所遇到的問題。

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