當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

BOM(Browser Object Model)

發布時間：2023/12/2 编程问答 31 豆豆

生活随笔收集整理的這篇文章主要介紹了 BOM(Browser Object Model) 小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

BOM（瀏覽器對象模型），提供了一系列操作瀏覽器，獲取瀏覽器信息的接口。這些接口在平時的工作中會經常用到，例如當前頁面的刷新，獲取url的參數等等。

注：圖片來自 http://www.dreamdu.com/javascript/what_is_bom/

window對象

window對象是BOM的核心，表示的是瀏覽器的實例。

在全局作用域下聲明的變量會變成window對象的屬性，函數會變成window對象的方法。但是全局環境下聲明的變量對比window對象的屬性和方法還是有區別的。

訪問不存在的全局變量會報錯，但是訪問 window 對象上不存在的屬性會返回 undefined，并不會報錯。

可以使用 delete 操作符刪除 window 對象上的正常屬性并返回結果為 true 刪除成功，但是刪除全局變量則返回結果為 false 刪除失敗。

frames

window 對象的 frames 屬性里面有整個頁面的全部框架的 window 對象，訪問這些框架的 window 對象的方式可以是使用框架名稱（ iframe標簽的name屬性 <iframe name='frame1'></frame> ，同時 window.name 也可以獲取當前框架的名稱），也可以是按照從左到右從上到下的順序（從0開始）來訪問，同時可以在框架內使用 self 訪問自身 window 對象，使用 parent 訪問上級框架的 window 對象，使用 top 訪問頂級框架的 window 對象（瀏覽器窗口）。在頂級環境中這三個屬性是相等的（top === self && parent === self // true）。

在不同的框架中，因為每個框架都有自己的 window 對象并且 window 對象都包含原生類型的構造函數，這就意味著框架1的 {} 并不是框架2的 Object 的實例。

// a.html <html><head></head><body><iframe src="b.html"></iframe><script>function a(){alert('a');}frames[0].onload = function(){ // 注意這里要等到框架加載完成才能取到框架的window對象this.b();}</script></body> </html> // b.html <html><head></head><body><script>function b(){alert('b');}top.a();// 或者parent.a();</script></body> </html>

上面代碼的執行結果是先彈出 a 再彈出 b。這就說明可以通過 parent 來獲取父框架，也可以使用 frames 屬性獲取當前頁面內的框架。

注：涉及到跨頁面操作，必須要通過服務器訪問文件，并且兩個頁面要在同一域下才可。例如上面的文件a直接打開是不能正常運行的，需要將a文件和b文件放在一個服務器下然后通過域名或者ip來訪問才能正常顯示。

location

location 對象是唯一一個既是 window 對象的屬性也是 document 對象的屬性 window.location === document.location

注：圖片來自 http://www.dreamdu.com/javascript/window.location/

該屬性中保存了瀏覽器窗口當前url地址的格式化信息，同時可以通過該屬性提供的方法來指定瀏覽器當前窗口的頁面跳轉。

獲取格式化好的search屬性中的參數

修改每一個屬性（除了hash）都會刷新瀏覽器，并且都會（包括hash）生成一個歷史記錄。

注：location.toString() 得到的值就是當且頁面的地址 location.toString() === location.href //true

location.reload()

使用 location.reload() 會刷新當前頁面，但是有可能在緩存中讀取頁面，如果想要強制重新從服務器獲取頁面可以使用 location.reload(true) 。

location.assign()

指定頁面跳轉地址，對 location.href（也可以直接對 location 賦值 window.location = url）賦值跳轉就是調用該方法。

注：該方法并不能完成當前頁面的刷新 location.assign(location.href)，并不會刷新頁面。

location.replace()

該方法和 location.assign() 一樣，但是會 替換當前的地址記錄，也就是說使用該方法跳轉 頁面history.length 并不會加一 ，并且 history.back() 并 不能回到上一個頁面。

a.html —-> b.html –replace–> c.html –back–> a.html

注：同上并不能用于頁面的刷新，也就是說使用 location 對象實現刷新必須要使用 reload 方法

history

history對象里面記錄了瀏覽器該窗口訪問的歷史記錄棧，但是由于隱私的問題并不能獲取瀏覽器到底訪問了哪些頁面，但是可以通過history.length知道歷史棧里面的記錄條數。

history.back(); // 如果有就加載歷史記錄中后一個鏈接history.forward(); // 如果有就加載歷史記錄中前一個鏈接history.go(0); // 刷新當前頁history.go(1); // 同 history.forward();history.go(-1); // 同 history.back();history.go(n); // 正數向前，負數向后。值就表示從當前記錄開始第n條記錄

注：history 對象的這三個方法并不會改變 length 的長度，也就是說 back 并不會刪除當前頁面的記錄，還可以通過 forward 回來，但是如果 back 了并且打開了別的鏈接，那么在 back 之前的頁面記錄在 history 中就沒有了。
a.html —-> b.html —-> c.html –back–> b.html –forward —-> c.html –back–> b.html –back–> a.html —-> e.html –back–> a.html –forward–> e.html –forward–> e.html

navigator

userAgent屬性是用戶代理頭的字符串表示，經常被用于判斷設備。比如是否是在微信中，是什么瀏覽器等。

navigator.userAgent // "Mozilla/5.0 (iPhone; CPU iPhone OS 9_1 like Mac OS X) AppleWebKit/601.1.46 (KHTML, like Gecko) Version/9.0 Mobile/13B143 Safari/601.1"

但是userAgent的信息并不十分可靠，應為這個屬性是可寫的，也就是說會被偽造。

cookieEnabled屬性返回表示cookie是否啟用，cookie返回true表示啟用，否則返回false表示未啟用。

navigator.cookieEnabled // true

navigator對象除了上面兩個常用的屬性外還有很多其他的屬性具體看文末參考。

screen

可以通過screen對象獲取電腦屏幕的相關信息。

width：屏幕的寬度

height: 屏幕的高度

availHeight：屏幕可用高度，應為系統會有任務欄等并不能全部都給瀏覽器用，所以這個值可能和screen.height不一致

availWidth：屏幕可用寬度

計時器

setTimeout方法超時調用

超時調用：是指在規定時間（ 時間是以毫秒為單位）后執行指定函數。

var id = setTimeout(function(){console.log('1秒后') }, 1000); // 1秒后打印 '1秒后'

該方法會返回一個 int 類型的數據，可以通過該值去取消定時器的執行。

clearTimeout(id); // 這樣就會不打印 '1秒后'

setInterval方法間歇調用

間歇調用：指定的時間間隔重復執行指定函數。

var id = setInterval(function(){console.log('1秒后') }, 1000); // 每間隔 1 秒就會答應出 '1秒后' clearInterval(id); // 停止打印

使用場景：

倒計時（驗證碼獲取）

動畫

數字時鐘

等等

打開新窗口

我們知道可以通過a標簽的 target="_blank" 來讓瀏覽器打開一個新窗口，那么怎么使用js來打開新的窗口？

可以使用 window.open( url, target, features ) 返回值是一個新窗口的window對象，可以用于關閉新打開的窗口（newWindow.close()）

window.open('http://www.baidu.com', '_blank', 'height=600,width=600'); // 這樣就在瀏覽器中打開了一個新窗口 //如果沒有第三個參數就是打開一個新標簽頁，如果第二個屬性不是 _blank 不會打開一個新窗口

type：值可以是 _blank、_self、_top、_parent和頁面中的框架名稱中的一個。

features：字段的要求是用逗號分割屬性并且屬性之間不能使用空格，除了height、width等基本屬性還有其它屬性詳見參考。

系統對話框

系統對話框可以提示用戶相關信息或者做出簡單的交互。彈出系統對話框的時候js代碼是暫停運行的，只有用戶做出響應之后才會繼續執行，這是同步的。

alert(msg) 會將msg展示出來，并且只有一個確定按鈕

var a = alert('控制臺沒有打印"a"'); // 沒有返回值 console.log("關閉對話框后，控制臺打印了'a'", "我是alert的返回值：" + a);

confirm(msg) 會展示msg，并且有確定和取消，確定返回 true，取消返回false

var res = confirm('努力學習就會進步嗎？'); if( res ){console.log('努力學習就會進步'); }else{console.log('努力學習不會進步'); }

prompt(msg) 會展示一個msg并且提供一個輸入框，返回值就是輸入的值

var res = prompt('請輸入年齡'); // 如果點擊了取消返回值是null，點擊確定返回值就是輸入框的值。if( res ){console.log('年齡是：' + res); }

尺寸

獲取瀏覽器可視窗口的尺寸并不包括工具欄和滾動條

// 現代瀏覽器 window.innerHeight// IE6/7/8 document.documentElement.clientHeight // 或者 document.body.clientHeight// 完整方案 var h = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight; var w = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;

參考

http://www.jb51.net/article/97904.htm

http://www.w3school.com.cn/jsref/dom_obj_navigator.asp

http://www.dreamdu.com/javascript/bom/

https://itbilu.com/javascript/js/4k9JcnZRl.html#BOM-screen

總結

以上是生活随笔為你收集整理的BOM(Browser Object Model)的全部內容，希望文章能夠幫你解決所遇到的問題。

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